我有以下代码来使用 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。
如何删除数据集标签?
只需设置
label
和 tooltip
选项即可
...
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}
截至 2021 年,命名空间已从
options.legend
更改为 options.plugins.legend
。这个简单的代码对我有用 -
options: {
plugins: {
legend: {
display: false
}
}
}
添加:
Chart.defaults.global.legend.display = false;
在脚本代码的开头;
上述解决方案对于 v3.1 之前的图表 js 版本是正确的,对于 v3.1.1 使用以下内容
...
options: {
plugins:{
legend: {
display: false
}
}
}
对于那些想要在 2021 年删除实际轴标签而不仅仅是图例的人(Chart.js v.3.5.1)。注意:这也会删除轴。
const chartWrap = document.querySelector('.chart-wrap')
const canvas = document.createElement('canvas')
chartWrap.appendChild(canvas)
const ctx = canvas.getContext('2d')
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Your', 'axis', 'labels'],
datasets: [
{
label: 'Your legend label',
data: [1, 3, 2],
backgroundColor: '#54ACEF'
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: false // Hide legend
},
scales: {
y: {
display: false // Hide Y axis labels
},
x: {
display: false // Hide X axis labels
}
}
}
})
<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
就像添加这个一样简单:
legend: {
display: false,
}
或者,如果您愿意,您可以使用其他也应该有效的选项:
Chart.defaults.global.legend.display = false;``
new Chart('idName', {
type: 'typeChar',
data: data,
options: {
legend: {
display: false
}
}
});
用此代码片段替换选项,将为 Vanilla JavaScript 开发人员修复
options: {
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
ticks: {
display: false
}
}]
},
legend: {
display: false
}
}