如何在 ChartJs 中显示数据值或索引标签(最新版)
How to show data values or index labels in ChartJs (Latest Version)
如何在 ChartJs(最新版本)中显示数据值或索引标签,如下图所示:
我正在使用 ChartJs 在我的 React 项目中显示图表。一切正常,除了这个。
我在 Whosebug () 中找到了答案,但它使用的是旧版本的 chartjs,无法在我正在使用的版本上运行。
我的 ChartJs 代码:
var ctx = document.getElementById("myChart");
var BarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","March"],
datasets: [{
label: "Chart Data",
data: [10,20,15],
backgroundColor: "red",
borderColor: "green",
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
maxRotation: 180
}
}]
}
}
});
我尝试使用函数添加它:ctx.fillText(bar.value, bar.x, bar.y - 5);
,但它显示 .fillText is not a function
经过一些研究,它开始工作了。
你必须在动画的onComplete
事件之后设置它。
条形的 x、y 值存储在子模型中(点、线、条形等等)
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
console
var model = dataset._meta[0].dataset._children[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
});
}
只是结构发生了一点变化。
你可以在这个工作中看到它JSFiddle
终于成功了。
在 onComplete() 函数中使用了以下代码:
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
}
});
}
}
如何在 ChartJs(最新版本)中显示数据值或索引标签,如下图所示:
我正在使用 ChartJs 在我的 React 项目中显示图表。一切正常,除了这个。
我在 Whosebug (
我的 ChartJs 代码:
var ctx = document.getElementById("myChart");
var BarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","March"],
datasets: [{
label: "Chart Data",
data: [10,20,15],
backgroundColor: "red",
borderColor: "green",
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
maxRotation: 180
}
}]
}
}
});
我尝试使用函数添加它:ctx.fillText(bar.value, bar.x, bar.y - 5);
,但它显示 .fillText is not a function
经过一些研究,它开始工作了。
你必须在动画的onComplete
事件之后设置它。
条形的 x、y 值存储在子模型中(点、线、条形等等)
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
console
var model = dataset._meta[0].dataset._children[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
});
}
只是结构发生了一点变化。
你可以在这个工作中看到它JSFiddle
终于成功了。
在 onComplete() 函数中使用了以下代码:
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
}
});
}
}