Question

我正在使用Chart.js创建一个简单的饼图，我想知道用户如何与该图表进行交互，因此如果他们单击或将鼠标悬停在某个部分上，它将在以下位置展开以提供更多信息：底部。

我已经搜寻了互联网，但只能找到弹出通知（单击事件）。我真正想要的是一个显示在底部的部分，最多包含一段信息。

以下是饼图的示例-说我想让“ Azure”在悬停时阅读“ Azure 45”，然后在底部扩展一些其他信息，例如“ Azure是浅蓝色的阴影在蓝色和青色之间旋转。”

这是我的代码-希望我要传达的内容有意义-预先感谢您！

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'pie',
    data: {
        labels: ["Navy", "Ruby", "Emerald", "Orange", "Azure"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF"],
            data: [10, 20, 30, 40, 45],
        }]
    },    

    // Configuration options go here
    options: {
      responsive: true,
      title:{
        display: true, 
        text: "Colour test"
      }
    }
});

Answer 1

在图表下方显示其他信息可能不在Chart.js的范围内，因此您需要自己进行例如以下操作：在图表下方放置一个单独的DIV，该图表会动态更新。所以问题是，如何触发更新？

我还没有找到在段上侦听悬停事件的方法。但是，Chart.js为工具提示提供了一系列回调，每当用户悬停某个元素时就会触发这些回调，请参见：https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

您可以像这样钩住其中之一：

const chartOptions = {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                const dataSet = data.datasets[tooltipItem.datasetIndex];
                const value = dataSet.data[tooltipItem.index];

                // Now trigger a data update / display of a separate DIV with your information.

                // Don't forget to return your desired label value.
                return value;
            }
        }
    }
}

单击图表以展开更多信息-Chart.js

1 个答案: