Chart.js v2隐藏数据集标签

问题描述 投票:70回答:3

我有以下代码使用Chart.js v2.1.3创建图形:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

代码看起来很简单,但我无法从图表中删除标签。我尝试了很多在线发现的解决方案,但大多数都使用Chart.js v1.x.

如何删除数据集标签?

chart.js chart.js2
3个回答
175
投票

只需设置labeltooltip选项即可

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

小提琴 - http://jsfiddle.net/g19220r6/


25
投票

加:

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

在脚本代码的开头;


7
投票

您还可以通过删除“标题”将工具提示放在一行上:

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

enter image description here


1
投票

它就像添加这个一样简单:legend: { display: false, }

//或者如果你想要你可以使用另一个也应该有效的选项:

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

© www.soinside.com 2019 - 2024. All rights reserved.