我有以下代码使用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。
如何删除数据集标签?
答案 0 :(得分:163)
只需设置label
和tooltip
选项即可
...
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
答案 1 :(得分:22)
添加:
Chart.defaults.global.legend.display = false;
启动脚本代码;
答案 2 :(得分:17)
截至 2021 年,命名空间已从 options.legend
更改为 options.plugins.legend
。这个简单的代码对我有用 -
data{
...
},
options: {
plugins: {
legend: {
display: false
}
}
}
答案 3 :(得分:6)
您还可以通过删除“标题”将工具提示放在一行:
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,
}
},
},
});
答案 4 :(得分:2)
上述解决方案对于 v3.1 之前版本的图表 js 是正确的,对于 v3.1.1 使用以下内容
...
options: {
plugins:{
legend: {
display: false
}
}
}
答案 5 :(得分:1)
用此代码段替换选项,将为 Vanilla JavaScript 开发人员修复
options: {
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
ticks: {
display: false
}
}]
},
legend: {
display: false
}
}
答案 6 :(得分:0)
就像添加以下内容一样简单:
legend: {
display: false,
}
//或者,如果您愿意,也可以使用此其他选项:
Chart.defaults.global.legend.display = false;
答案 7 :(得分:0)
i_arr = np.array([0, 1, 1, 0, 0, 1, 0])
v_arr = np.array([1, 2, 3, 4, 5, 6, 7])
np.column_stack((1-i_arr, i_arr)) * v_arr[:,None]
Out[61]:
array([[1, 0],
[0, 2],
[0, 3],
[4, 0],
[5, 0],
[0, 6],
[7, 0]])