我使用chartjs创建了图形。它工作正常，唯一的问题是它在每个点上显示数据标签(数字)。我想隐藏它们，但找不到方法。谁能帮我解决这个问题？我尝试设置 pointRadius = 0，但它没有做我想要的。
另外，如果我不能隐藏它们，有没有办法改变它们的颜色？
Chart Image
const ctx = document.getElementById('timelineChart');
const chartColors = {
red: '#C82846',
green: '#7DC36E',
blue: '#249FBA',
darkblue: '#249FBA'
};
const config = {
plugins: [new BandsPlugin()],
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "April", "May", "June", "July",
"January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
borderColor: chartColors.green,
fill: false,
type: 'line',
id: 'y-axis-1',
pointRadius: 0,
data: [
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor()
],
}, {
type: 'bar',
id: 'y-axis-0',
borderWidth: 1,
borderColor: chartColors.green,
backgroundColor: chartColors.blue,
data: [
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor(),
this.randomPositiveFactor()
],
fill: false,
}]
},
options: {
pointRadius: 1,
pointHoverRadius: 1,
legend: {
display: false
},
elements: {
line: {
tension: 0,
},
point: { radius: 0 }
},
responsive: true,
title: {
display: false,
text: 'Timeline Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'dataset'
},
scales: {
xAxes: [{
barThickness: 15,
display: true,
scaleLabel: {
show: false,
labelString: 'Month'
},
ticks: {
beginAtZero: true
},
afterTickToLabelConversion: function (data) {
const xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (i % 2 === 1) {
xLabels[i] = '';
}
});
}
}],
yAxes: [{
id: 'y-axis-0',
display: true,
position: 'left',
scaleLabel: {
show: false,
labelString: 'Value'
},
ticks: {
suggestedMin: -100,
suggestedMax: 100,
max: 100,
min: 0,
stepSize: 100,
},
},
{
id: 'y-axis-1',
position: 'right',
ticks: {
suggestedMin: -100,
suggestedMax: 100,
max: 100,
min: -100,
stepSize: 100,
},
scaleLabel: {
show: false,
labelString: 'Value'
},
}]
},
bands: {
yValue: 50,
bandLine: {
stroke: 0.5,
colour: 'black',
type: 'dashed',
},
belowThresholdColour: [
chartColors.red,
chartColors.blue
]
}
}
};
const timelineChart = new Chart(ctx, config);
最佳答案
我遇到了同样的问题，并遇到了这篇文章。我猜你已经安装了 datalabels 插件(我安装了)。将此添加到您的图表选项:
plugins: {
datalabels: {
display: false,
},
}
希望这有帮助
关于chart.js - Chartjs 隐藏数据点标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51268325/