时间戳

首页 > 解决方案 > chart.js 条形图数据标签在悬停在图表上时消失

javascript - chart.js 条形图数据标签在悬停在图表上时消失

问题描述

我有一个条形图，每个条上都有一个标签。

问题是当我将鼠标悬停在图表上时，所有标签都消失了。

悬停前：

在此处输入图像描述

悬停后：

在此处输入图像描述

这是我的代码：

let barChartData = {
    labels:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
    datasets: [{
        label: 'Sessions',
        backgroundColor: 'rgba(0,163,224, 0.7)',
        borderColor: 'rgba(0,163,224, 1)',
        borderWidth: 1,
        data:[81, 69, 60, 51, 37, 35, 45, 65, 86, 58, 64, 39, 48, 29, 69, 80, 52, 61, 56, 40, 51, 31, 70, 51, 32, 51, 27, 30, 44, 59, 46]
    }]
};
let ctx = document.getElementById(id).getContext("2d");
let chart = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        "animation": {
            "duration": 1,
            "onComplete": function () {
                let chartInstance = this.chart, ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fontColor = 'black'
                this.data.datasets.forEach(function (dataset, i) {
                    let meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        let data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                    });
                });
            }
        },
        plugins: {
            datalabels: {
                color: '#000000'
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: true,
            mode: 'label'
        },
    }
});
我删除了动画字段，但没有工作。

我使用的 chartjs 版本是 2.7.3

标签： javascriptchart.js

解决方案

您可以通过更新 Chart.js 2.9.3 并传递一个空hover函数来解决此问题：

<html>
<head>

</head>
<body>
<canvas id="container"></canvas>
<script src="https://pagecdn.io/lib/chart/2.9.3/Chart.bundle.min.js"></script>
</body>
</html>

let barChartData = {
    labels:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
    datasets: [{
        label: 'Sessions',
        backgroundColor: 'rgba(0,163,224, 0.7)',
        borderColor: 'rgba(0,163,224, 1)',
        borderWidth: 1,
        data:[81, 69, 60, 51, 37, 35, 45, 65, 86, 58, 64, 39, 48, 29, 69, 80, 52, 61, 56, 40, 51, 31, 70, 51, 32, 51, 27, 30, 44, 59, 46]
    }]
};
const id = 'container';
let ctx = document.getElementById(id).getContext("2d");
let chart = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        "animation": {
            "duration": 1,
            "onComplete": function () {
                let chartInstance = this.chart, ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fontColor = 'black'
                this.data.datasets.forEach(function (dataset, i) {
                    let meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        let data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);
                    });
                });
            }
        },
        hover: () => {},
        plugins: {
            datalabels: {
                color: '#000000'
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: true,
            mode: 'label'
        },
    }
});

此修复不适用于 Chart.js 2.7.3。我不知道这是一个错误还是故意的不同行为。

活生生的例子

推荐阅读