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

IT技术 javascript html charts chart.js
2021-03-16 18:17:44

如何隐藏在 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>
6个回答

更新 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
                }
            }]
        }
    }
});

参考:chart.js 文档

旧答案(在当前版本为 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>
@OhCaN 这个答案是在当前版本的 chartjs 是 v1.0 beta 时编写的,我已经使用该代码运行了实现,并且它们都可以正常工作。
2021-04-29 18:17:44
较新的 highchart 版本?这个问题是关于chart.js的。不是highcharts。
2021-05-02 18:17:44
不起作用。注释掉标签会使图表在更新时抛出错误。
2021-05-05 18:17:44
请downvoter告诉我如何改进我的答案,谢谢
2021-05-07 18:17:44
如果我是对的,这个解决方案还会删除“背景网格”(我不知道正确的参考,图表后面的灰色条)。是否有仅根据 OP 要求删除“标签”的解决方案?
2021-05-21 18:17:44

(这个问题是在 chart.js 中的副本,如果从移动设备访问,是否可以隐藏条形图的 x 轴标签/文本?)他们添加了选项,2.1.4(也许更早一点)有它

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

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

}

这是用于 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
              }
           }
        }
    }
});
是的,我使用 chart.js 3.0.2,这对我有用
2021-05-08 18:17:44
所以这就像@giammin 的答案,但对于较新的版本?
2021-05-15 18:17:44

现在面临在 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, },
2021-05-03 18:17:44
完美的 !这就是我要找的。但它必须在呈现图表之前设置。之后就不行了...
2021-05-11 18:17:44