Js v2隐藏数据集标签

使用 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。

如何删除数据集标签?

281778 次浏览

像这样设置 labeltooltip选项

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

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

补充:

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

在开始你的脚本代码;

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

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

只要加上这个就行了:

legend: {
display: false,
}

或者,如果你想,你可以使用这个其他选项,也应该工作:

Chart.defaults.global.legend.display = false;``
new Chart('idName', {
type: 'typeChar',
data: data,
options: {
legend: {
display: false
}
}
});

用这个代码片段替换选项,将修复 VanillaJavaScriptDevelopers

options: {
title: {
text: 'Hello',
display: true
},
scales: {
xAxes: [{
ticks: {
display: false
}
}]
},
legend: {
display: false
}
}

从2021年开始,名称空间从 options.legend改为 options.plugins.legend

options: {
plugins: {
legend: {
display: false
}
}
}

参考文件

新的解决方案 ChartJSv3.1.1

上面的解决方案对于3.1版本之前的图表 js 是正确的,对于3.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>