Chart js scatter - 在悬停时显示标签

debugcn 发表于 Dev

本·梅

我拼凑了一个图表 js 散点图 - 效果很好。

在这个 js 的底部，我有一个函数可以获取点击点的标签，以便我可以用它做一些事情 - 这工作正常。

我不能做的是让这个标签在用户悬停在该点上时显示 - 我只是获得数据点的 x 和 y 值。

我希望在用户悬停时显示相关标签。理想情况下，我不希望 x 和 y 值。

我怎么做？

谢谢，

<script>var data = {
        datasets: [{
                  backgroundColor: "#566573",
                  {{scatterData|safe}}
                  }],
                  {{labelsData|safe}}
                };

                $(document).ready(
                  function () {
                    var canvas = document.getElementById("myChart");
                    var ctx = canvas.getContext("2d");
                    var myNewChart = new Chart(ctx, {
                      type: 'bubble',
                      data: data,
                options : {
                    legend: {
                        display: false
                     },
                        scales: {
                        yAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'Page Value'
                          }
                        }],
                        xAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'Unique Page Views'
                          }
                        }]                      }
                    }
                    });
                    canvas.onclick = function (evt) {
                      var activePoints = myNewChart.getElementsAtEvent(evt);
                      var chartData = activePoints[0]['_chart'].config.data;
                      var idx = activePoints[0]['_index'];
                      var label = chartData.labels[idx];
                      var value = chartData.datasets[0].data[idx];
                      loadScatterPoint(label);
                    };
                  }
                );
    </script>

ɢʀᴜɴᴛ

无需click为您的图表使用事件处理程序。

要在工具提示上显示标签，您必须label为数据集定义属性，如下所示...

var data = {
   datasets: [{
      label: 'Ben Mayo',  //<-- define this
      backgroundColor: "#566573",
      { { scatterData | safe } }
   }],
   { { labelsData | safe } }
};

note: labels array are not applicable for bubble chart.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。