javascript - 如何隐藏工具提示及其各自的数据集

Question

我正在使用charts.js。对于我当前的需求，我设法找到一种方法来将工具提示配置为始终可见，无论悬停事件如何。我的问题是工具提示可见性不遵循数据集行为。在 Charts.js 上，您可以单击数据集以将其从图表中删除。我的图表做到了这一点，但工具提示仍然可见， float 在图表中，没有数据集可以表示。单击标签时有没有办法隐藏数据集数据？

这是我所说的当前状态的示例。 https://jsfiddle.net/CaioSantAnna/ddejheg0/ 。

HTML

<canvas id="linha"></canvas>

Javascript

Chart.plugins.register({
    beforeRender: function (chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options.tooltips,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
        }
    }
});

ctx = document.getElementById("linha");
    var linha = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40],
                    spanGaps: false,
                    responsive: true,
                    animation: true,
                },
                {
                    label: "Second dataset",
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: "rgba(0,0,0,0.4)",
                    borderColor: "rgba(0,0,0,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(0,0,0,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(0,0,0,1)",
                    pointHoverBorderColor: "rgba(0,0,0,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [13, 78, 60, 75, 90, 10, 27],
                    spanGaps: false,
                    responsive: true,
                    animation: true,
                }
            ]
        },
        options: {
            tooltips: {
                callbacks: {
                    title: function (tooltipItem, data) { return "" },
                    label: function (tooltipItem, data) {
                        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                        var label = data.labels[tooltipItem.index];
                        return value;
                    }
                }
            },showAllTooltips: true
        }
    });

要重现该问题，只需单击图表顶部的标签之一即可。

提前致谢。

Answer 1

为了结束这个问题，我最终更改为 amcharts( https://www.amcharts.com/ )。它具有类似于我试图使用 Chart.js 实现的功能，并且可以在链接软件许可下免费使用。

再次感谢。