Javascript Chart.js条形图标签在悬停时隐藏
我有一个带有自定义弹出窗口的条形图,每个条形图上都有一个标签。问题是,当任何一个条悬停在上方时,所有标签都会消失。 我在文档中看不到任何对我有帮助的东西Javascript Chart.js条形图标签在悬停时隐藏,javascript,jquery,chart.js,Javascript,Jquery,Chart.js,我有一个带有自定义弹出窗口的条形图,每个条形图上都有一个标签。问题是,当任何一个条悬停在上方时,所有标签都会消失。 我在文档中看不到任何对我有帮助的东西 var context = document.getElementById('serviceLife').getContext('2d'); window.myObjBar2 = new Chart(context).Bar(barChartData2, { scaleOverride: true, scaleSteps:
var context = document.getElementById('serviceLife').getContext('2d');
window.myObjBar2 = new Chart(context).Bar(barChartData2, {
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
barShowStroke: false,
barStrokeWidth: 0,
barValueSpacing: 2,
animation: false,
responsive: true,
tooltipTemplate: "<%if (label){%><%=label.tooltip%><%}%>",
maintainAspectRatio: true,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
var context=document.getElementById('serviceLife').getContext('2d');
window.myObjBar2=新图表(上下文).Bar(barChartData2{
scaleOverride:对,
比例:10,
刻度宽度:10,
scaleStartValue:0,
barShowStroke:错,
barStrokeWidth:0,
barValueSpacing:2,
动画:错,
回答:是的,
工具脚本模板:“”,
维护Aspectratio:是的,
onAnimationComplete:函数(){
var ctx=this.chart.ctx;
ctx.font=this.scale.font;
ctx.fillStyle=this.scale.textColor
ctx.textAlign=“中心”;
ctx.textb基线=“底部”;
this.datasets.forEach(函数(数据集){
dataset.bar.forEach(函数(bar){
填充文本(bar.value,bar.x,bar.y-5);
});
})
}
});
您可能需要创建一个简单的扩展,因为这似乎是Chart.js中的一个已知问题:。我花了一点时间来解决这个问题
我从研究扩展中得到的
我将onAnimationComplete函数移到了。扩展:
Chart.types.Bar.extend({
name: "BarAlt",
draw: function () {
Chart.types.Bar.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
您知道如何使用条形图进行此操作吗?我真的不明白此扩展正在做什么。解决方案: