作者:月光魔术师2702935955 | 来源:互联网 | 2022-12-23 17:39
我如何使用Charts.js在每一行末尾添加文本,例如第97、95等 。任何帮助都会很棒。我尝试了文档并进行了谷歌搜索。
1> beaver..:
您可以在每行末尾扩展线控制器图形系列标签:
var chartData = {
datasets: [{
label: 'serie1',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
borderColor: 'rgba(0, 119, 290, 0.6)',
data: [{x: 1, y: 10}, {x: 2, y: 12}, {x: 3, y: 18}, {x: 4, y: 5}, {x: 5, y: 25}, {x: 6, y: 30}]
},
{
label: 'serie2',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
borderColor: 'rgba(120, 0, 190, 0.6)',
data: [{x: 1, y: 8}, {x: 2, y: 9}, {x: 3, y: 16}, {x: 4, y: 8}, {x: 5, y: 12}, {x: 6, y: 20}]
},
{
label: 'serie3',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
borderColor: 'rgba(0, 200, 10, 0.6)',
data: [{x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 26}, {x: 4, y: 18}, {x: 5, y: 19}, {x: 6, y: 10}]
}]
};
var originalCOntroller= Chart.controllers.line;
Chart.controllers.line = Chart.controllers.line.extend({
draw: function() {
originalController.prototype.draw.call(this, arguments);
drawLabels(this);
}
});
function drawLabels(t) {
ctx.save();
ctx.fOnt= Chart.helpers.fontString(12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = 'red';
ctx.textBaseline = 'bottom';
var chartInstance = t.chart;
var datasets = chartInstance.config.data.datasets;
datasets.forEach(function(ds, index) {
var label = ds.label;
var meta = chartInstance.controller.getDatasetMeta(index);
var len = meta.data.length-1;
//console.log(ds, meta.data[len]._model);
var xOffset = meta.data[len]._model.x+10;
var yOffset = meta.data[len]._model.y;
ctx.fillText(label, xOffset, yOffset);
});
ctx.restore();
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
legend: { display: false },
scales: {
xAxes: [{
type: 'linear',
scaleLabel: { display: true, labelString: 'x' }
}],
yAxes: [{
ticks: { min: 0 },
scaleLabel: { display: true, labelString: 'y' }
}]
},
layout: {
padding: {
left: 0,
right: 60,
top: 20,
bottom: 0
}
}
}
});
#myChart {
border: solid 1px rgba(255, 0, 0, 0.5);
}