删除 chart.js 中的 x 轴标签/文本

Posted 2023-02-16

【中文标题】删除 chart.js 中的 x 轴标签/文本

【英文标题】：Remove x-axis label/text in chart.js

【发布时间】：2014-06-18 21:37:15

【问题描述】：

如何隐藏 chart.js 中显示的 x 轴标签/文本？

设置scaleShowLabels:false 只删除y 轴标签。

<script>
    var options = 
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    ;
    var lineChartData = 
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            
        ]

    

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>

【参考方案1】：

更新 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

旧答案（当前版本为 1.0 beta 时编写）仅供参考：

要避免在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>

【讨论】：

请dow​​nvoter告诉我如何改进我的答案，谢谢

不起作用。注释掉标签会使图表在更新时抛出错误。

@OhCaN 这个答案是在当前版本的 chartjs 是 v1.0 beta 时编写的，我已经使用该代码运行了实现，它们都可以正常工作。

更新的 highchart 版本？这个问题是关于 chart.js 的。不是highcharts。

如果我是对的，这个解决方案还会删除“背景网格”（我不知道正确的参考，图表后面的灰色条）。是否有仅根据 OP 要求删除“标签”的解决方案？

【参考方案2】：

（此问题与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
                
            ]
        
    

【参考方案3】：

这适用于 chart.js ^3.0.0

删除 x 轴标签和网格图表线

var chart = new Chart(ctx, 
    ...
    options:
        scales:
            x: 
                display: false
            
        
    
);

仅移除 x 轴标签

var chart = new Chart(ctx, 
    ...
    options: 
        scales: 
            x: 
               ticks: 
                   display: false
              
           
        
    
);

【讨论】：

所以这就像@giammin 的答案，但对于较新的版本？

是的，我使用的是 chart.js 3.0.2，这对我有用

【参考方案4】：

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);

【参考方案5】：

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

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

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

【讨论】：

使用版本：2.1.6，这个成功了。此外，如果不使用 global，您可以：options: legend: display: false, ,

完美！这就是我要找的。但它必须在图表呈现之前设置。之后就不行了……

【参考方案6】：

对于那些这不起作用的人，这是我在 X 轴上隐藏标签的方式-

options: 
    maintainAspectRatio: false,
    layout: 
      padding: 
        left: 1,
        right: 2,
        top: 2,
        bottom: 0,
      ,
    ,
    scales: 
      xAxes: [
        
          time: 
            unit: 'Areas',
          ,
          gridLines: 
            display: false,
            drawBorder: false,
          ,
          ticks: 
            maxTicksLimit: 7,
            display: false, //this removed the labels on the x-axis
          ,
          'dataset.maxBarThickness': 5,
        ,
      ],

【参考方案7】：

受 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;

这也保留了工具提示。

【讨论】：

完美运行；你是一个救生员！

我解决了它在之前插入这些行：this.buildScale(data.labels);行：2375. var newLabels=[]; for(var i=0;i

【参考方案8】：

最简单的解决方案是：

scaleFontSize: 0

见chart.js Document

smilar question

【讨论】：

这也会移除 y 轴刻度。

scaleFontSize 不是有效属性

【参考方案9】：

如果您希望为工具提示保留标签，但不显示在条形下方，则以下 hack 可能有用。我进行此更改是为了在私有 Intranet 应用程序上使用，并且尚未对其效率或副作用进行测试，但它满足了我的需要。

在 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 不太熟悉，也没有时间进行严格测试，因此宁愿避免破坏任何东西。