Question

如何在点击雷达图表上的点时配置ChartJS 2.0版，提供与该点相关的数据，即标签，数据值，数据集名称。我在https://github.com/nnnick/Chart.js/releases上阅读了2.0版提供的内容：

onHover和onClick等新事件挂钩为您完成了艰苦的工作。他们甚至无需通过活动找到你的好东西

有人可以告诉我我需要做什么我已阅读文档并尝试附加到各种点击和onClick事件，不同的对象支持但无法弄清楚如何获取相关数据。

我使用的示例代码（简化）是：

<pre>

    <script type="text/javascript">
      var config = {
      type: 'radar',
      data: {
      labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total  Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"],
     datasets:
    [
     {
      label: "DB1",
      fillColor: "rgba(212, 212, 106, 0.2)",
      strokeColor: "rgba(212, 212, 106, 1)",
      pointColor: "rgba(212, 212, 106, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(212, 212, 106, 1)",
      data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]
     },
     {
      label: "DB2",
      fillColor: "rgba(165, 198, 99, 0.2)",
      strokeColor: "rgba(165, 198, 99, 1)",
      pointColor: "rgba(165, 198, 99, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(165, 198, 99, 1)",
      data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214]
     }
     ]
     }
    };

     $(function () {
            var myRadar = new Chart(document.getElementById("myChart"), config);
         //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0?
        });

</script>

<div class="radarChart">
     <canvas id="myChart" width="700" height="700"></canvas>
</div>

非常感谢提前。

Answer 1

您应该可以使用document.getElementById("myChart").onclick = function(evt){ var activePoints = myRadar.getElementsAtEvent(evt); // use _datasetIndex and _index from each element of the activePoints array };方法，如此

#wrapper {
    width: 100%;
}

#canvas {
    width: 80%;
    height: 300px;
    border: 1px solid black;
}

#chat {
    width: 15%;
    height: 300px;
    border: 1px solid black;
}

小提琴 - http://jsfiddle.net/uwaszvk7/

Answer 2

此外，您可以使用var activePoints = chartObj.getElementsAtXAxis(evt);根据x轴获取最近的活动元素。（当你有一些非常小的值时，超级有用）

Answer 3

在ChartJS 2.0中实现此目的的另一种方法是使用雷达图的lastActive属性。

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

Answer 4

在您的图表实例上调用getElementsAtEvent(event)传递事件的参数或jQuery事件将返回点元素就是那个事件的同一个位置。

...
var canvas = document.getElementById("myChart");
var myRadar = new Chart(canvas, config);
canvas.onclick = function(evt) {

    // => activePoints is an array of points on the canvas that are at the same position as the click event.
    var activePoint = myRadar.getElementsAtEvent(evt)[0];

    if (activePoint !== undefined) {
        var dataset = myRadar.data.datasets[activePoint._datasetIndex];
        var title = myRadar.data.labels[activePoint._index];
        var oldValue = dataset.data[activePoint._index];
        var newValue = oldValue + 10;
        dataset.data[activePoint._index] = newValue;
    }

    // Calling update now animates element from oldValue to newValue.
    myRadar.update();

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue);
};

Answer 5

我有一个包含多个数据集的图形。使用建议的getElementsAtEvent(evt)函数，返回给定x位置的所有数据集，但不仅返回我单击的单个数据集索引。因此，不可能识别出各个数据集。

要仅获得单击的单点：

const activePoints = chartObj.getElementAtEvent(event);
const datasetIndex = activePoint[0]._datasetIndex;
const itemIndex = activePoint[0]._index;

请注意，与getElementAtEvent()相比getElementsAtEvent()中缺少的“ s”。

ChartJs 2.0如何获取点击的点信息？

5 个答案: