作者:西北人6668_733 | 来源:互联网 | 2023-02-12 13:25
我正在使用Chart.js在我的网站上绘制一系列图表,并且我编写了一个帮助方法来轻松绘制不同的图表:
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) {
var ctx = ctxElement;
var data = {
labels: ctxDataLabels,
datasets: ctxDataSets
};
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fOntSize= (height / 114).toFixed(2);
ctx.fOnt= fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = midLabel,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
var chart = new Chart(ctx, {
type: ctxType,
data: data,
options: {
legend: {
display: false
},
responsive: true
}
});
}
drawChart()方法的最后一个参数包含应该添加到图表中间的标签.该Chart.pluginService.register
部分是绘制标签的代码.问题是,当我多次执行drawChart方法(在我的情况下为三次)并在方法执行中提供每个图表的标签时,所有三个标签在每个图表上都显示在彼此的顶部.我需要在相应的图表中显示每个标签.除标签外,所有其他参数均已正确处理.
我如何实现这一目标?