移除chart.js中的x轴标签/文字 [英] Remove x-axis label/text in chart.js

问题描述

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

How do I hide the x-axis label/text that is displayed in chart.js ?

设置 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>

推荐答案

UPDATE chart.js 2.1及更高版本

UPDATE chart.js 2.1 and above

new Chart(ctx, {
    ...
    options:
    {
        scales:
        {
            xAxes: [{
                display: false
            }]
        }
    }
});

参考：chart.js文档

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

为避免在 chart.js 中显示标签，您必须设置 scaleShowLabels：false ，也避免传递标签：

To avoid displaying labels in chart.js you have to set scaleShowLabels : false and also avoid to pass the 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>

这篇关于移除chart.js中的x轴标签/文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！