7 回答

• 14

  更新chart.js 2.1及以上

  var chart = new Chart(ctx, {
      ...
      options:{
          scales:{
              xAxes: [{
                  display: false //this will remove all the x-axis grid lines
              }]
          }
      }
  });
  
  
  var chart = new Chart(ctx, {
      ...
      options: {
          scales: {
              xAxes: [{
                  ticks: {
                      display: false //this will remove only the label
                  }
              }]
          }
      }
  });
  

  Reference: chart.js documentation

  Old answer (written when the current version was 1.0 beta) just for reference below:

  要避免在 chart.js 中显示标签，您必须设置 scaleShowLabels : false 并避免传递 labels ：

  <script>
      var options = {
          ...
          scaleShowLabels : false
      };
      var lineChartData = {
          //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
          //labels : ["1","2","3","4","5","6","7"],
          ... 
      }
      ...
  </script>
  

  回复于 2024-04-28T02:45:56+08:00
• 4

  （这个问题是In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?的重复）他们添加了选项，2.1.4（可能稍早）有它

  var myLineChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
          scales: {
              xAxes: [{
                  ticks: {
                      display: false
                  }
              }]
          }
      }
  }
  

  回复于 2024-04-28T02:45:56+08:00
• 3

  var lineChartData = {
      labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
  	,datasets : [
  		{
  			label: "My First dataset",
  			fillColor : "rgba(220,220,220,0.2)",
  			strokeColor : "rgba(220,220,220,1)",
  			pointColor : "rgba(220,220,220,1)",
  			pointStrokeColor : "#fff",
  			pointHighlightFill : "#fff",
  			pointHighlightStroke : "rgba(220,220,220,1)",
  			
  			data: [28, 48, 40, 19, 86, 27, 90]
  		}
  	]
  }
  
  
  
  window.onload = function(){
  	var options = {
  		scaleShowLabels : false // to hide vertical lables
  	};
  	var ctx = document.getElementById("canvas1").getContext("2d");
  	window.myLine = new Chart(ctx).Line(lineChartData, options);
  
  }
  

  回复于 2024-04-28T02:45:56+08:00
• 6

  现在面对删除Chartjs中的标签的问题 . 看起来文档得到了改进 . http://www.chartjs.org/docs/#getting-started-global-chart-configuration

  Chart.defaults.global.legend.display = false;
  

  此全局设置可防止图例显示在所有图表中 . 因为这对我来说已经足够了，所以我用它了 . 我不确定如何避免单个图表的传说 .

  回复于 2024-04-28T02:45:56+08:00
• 11

  受christutty的回答启发，这是一个修改源但尚未经过彻底测试的解决方案 . 我还没有遇到任何问题 .

  在默认值部分中，在第71行附近添加此行：

  // Boolean - Omit x-axis labels
  omitXLabels: true,
  

  然后在第2215行附近，在buildScale方法中添加：

  //if omitting x labels, replace labels with empty strings           
  if(Chart.defaults.global.omitXLabels){
      var newLabels=[];
      for(var i=0;i<labels.length;i++){
          newLabels.push('');
      }
      labels=newLabels;
  }
  

  这也保留了工具提示 .

  回复于 2024-04-28T02:45:56+08:00
• 86

  最简单的解决方案是：

  scaleFontSize: 0

  看chart.js Document

  smilar question

  回复于 2024-04-28T02:45:56+08:00
• 7

  如果您希望为工具提示保留标签，但不在条形图下方显示，则以下黑客可能会有用 . 我做了这个更改，用于私有内部网应用程序，并没有测试它的效率或副作用，但它做了我需要的 .

  在chart.js的第71行左右添加一个属性来隐藏条形标签：

  // Boolean - Whether to show x-axis labels
  barShowLabels: true,
  

  在大约1500行使用该属性来抑制更改this.endPoint（似乎需要计算代码的其他部分，因为图表的块消失或者如果我禁用了除此行以外的任何内容，则会被错误地渲染） .

  if (this.xLabelRotation > 0) {
      if (this.ctx.barShowLabels) {
          this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
      } else {
          // don't change this.endPoint
      }
  }
  

  在第1644行，使用该属性来禁止标签呈现：

  if (ctx.barShowLabels) {    
      ctx.fillText(label, 0, 0);
  }
  

  我想对Chart.js源进行此更改，但不熟悉git并且没有时间进行严格测试，因此宁愿避免破坏任何内容 .

  回复于 2024-04-28T02:45:56+08:00