我想知道是否有人遇到过类似的情况。我正在使用 Chart.js 创建条形图。条形图组件的要求之一是在条形本身上显示条形数据值。我为此创建了一个简单的插件,它可以正常工作,直到我注意到显示错误。
当悬停在任何条形上并显示工具提示时,条形数据值被向下推了一点。我不确定发生了什么。似乎工具提示以某种方式在图表中添加了某种空间。
有没有人遇到过类似的行为?
下面是为添加条形数据值而创建的插件:
Chart.pluginService.register({
afterDraw : function (chart ,easingValue, options) {
var configOptions = chart.config.options;
if (configOptions.barValueDisplay){
var ctx = chart.chart.ctx;
var scales = chart.scales;
var datasets = chart.config.data.datasets;
for(var i = 0; i< datasets.length; i++){
var meta = chart.getDatasetMeta(i);
var elements = meta.data
var yScale = scales['y-axis-0'];
for (var j = 0; j < elements.length; j++) {
var view = elements[j]._view;
var text = configOptions.barGoals ? datasets[i].rawData[j] :datasets[i].data[j];
var textWidth = ctx.measureText(text).width
var x = view.x - textWidth / 2;
var y = yScale.bottom-15;
ctx.save();
ctx.fillStyle = configOptions.barValueDisplay.color;
ctx.fillText(text, x, y);
ctx.restore();
}
}
}
}});
更新:创建 JSFiddler 示例后,我意识到此行为与未显示的图例有关。
那么,有什么想法可以在不显示图例的情况下解决这个问题吗?谢谢