Question

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

以下是我所说的当前状态的一个例子。 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实现的功能，可以在链接软件许可下免费使用。

再次感谢。

如何使用各自的数据集隐藏工具提示

1 个答案: