Chart.js条形图标签在悬停时被隐藏

Chart.js bar chart label gets hidden on hover

本文关键字：隐藏 悬停 js 条形图 标签 Chart      更新时间：2023-09-26

我有一个带有自定义弹出窗口的条形图，每个条形图上都有一个标签。问题是，当任何一个栏悬停在上面时，所有的标签都会消失。http://jsfiddle.net/s8yfqvdc/9/

我在文档中看不到任何对我有帮助的东西。

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);
            });
        })
    }
});

我在这方面花了一些时间并解决了这个问题。

我从研究外延中得到的。。。

我将onAnimationComplete函数移到.extend:

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);
            });
        })
    }
});

http://jsfiddle.net/s8yfqvdc/10/

您可能需要创建一个简单的扩展，因为这似乎是Chart.js中的一个已知问题：请参阅答案。

相关文章：