Question

我拼凑了一张图表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>

Answer 1

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

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

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

注意： labels数组不适用于气泡图。

Answer 2

我认为你最好使用角度图表js。他们在那里几乎没有例子 http://jtblin.github.io/angular-chart.js/

图表js散点图 - 悬停时显示标签

2 个答案: