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


70

如何隐藏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>

Answers:


142

UPDATE 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>

8
请唐纳德告诉我如何改善答案,谢谢
giammin

2
不起作用。注释掉标签会使图表在更新时引发错误。
Dunning-Kruger 2015年

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

1
较新的highchart版本?这个问题是关于chart.js的。不是高图。
查理·马丁

3
如果我是对的,则此解决方案还会删除“背景网格”(我不知道正确的引用,即图形后面的灰色条)。有没有一种解决方案只能按照OP的要求删除“标签”?
伊斯特万·帕林卡斯(IstvánPálinkás)


11

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

}


8

面对现在删除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, },
StackUnder 16'7

完美!这就是我想要的。但是必须在呈现图表之前进行设置。此后不起作用...
传说

6

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

这也保留了工具提示。


工作完美;您是救生员!
Nicholas-c

我解决了在:this.buildScale(data.labels);之前插入这些行的问题。行:2375。var newLabels = []; for(var i = 0; i <data.labels.length; i ++){newLabels.push(''); 然后使用以下代码进行更改:this.buildScale(newLabels);
萨穆尔岛


3

如果您希望保留工具提示的标签,但不显示在条形下方,则以下技巧可能会很有用。我进行了此更改以用于私有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不太熟悉,并且没有时间进行严格的测试,因此宁愿避免破坏任何内容。


2

对于那些行不通的人,这是我在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,
        },
      ],
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.