ChartJS onclick填充区域（雷达图）

我正在尝试在JQuery中创建一个函数来增加和减少点击的点数。 我已经设法创建了增加点数的onclick事件，但无法弄清楚如何减少它。

$("#radarChart").click( function (evt) { var activePoints = myRadarChart.getPointsAtEvent(evt); var Values = activePoints[0].label + ' = ' + activePoints[0].value; activePoints[0].value++; } ); 

上面的函数在点击时增加了一个点的值，为了减少它，我需要知道是否点击了填充区域。

我查看了ChartJS文档并没有遇到它。 其他图表确实有它，例如Polar Area Chart，当你hover一个部分时，它突出显示，这意味着有一个function可以检测鼠标hover在段上。

雷达图表中是否存在类似的function？

我的代码 。

如果没有，任何关于如何实现这一点的想法，将不胜感激。

我能想到的唯一选择是创建10个按钮，5个标签。 按钮将是+和 – ，增加和减少标签。 这在我看来需要太多空间，所以我试图避免它。

谢谢，

Answer 1

确实没有特定的chart.js API来执行您想要的操作，但您可以使用canvas API和一个小几何体来获得相同的结果。

基本上，如果用户在当前值的区域外单击，则希望增加该值，如果用户在当前值的区域内单击，则希望减少该值。

我已经修改了你的点击处理程序来做到这一点。

 function getElementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; }; function getEventLocation(element,event){ // Relies on the getElementPosition function. var pos = getElementPosition(element); return { x: (event.pageX - pos.x), y: (event.pageY - pos.y) }; }; function pointDistance(point1, point2) { return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)); }; //Get the context of the Radar Chart canvas element we want to select var ctx = document.getElementById("radarChart").getContext("2d"); // Create the Radar Chart var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions); $("#radarChart").click(function (evt) { var eventLocation = getEventLocation(this,evt); var activePoints = myRadarChart.getPointsAtEvent(evt); var eventLocDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, eventLocation); var activePointDistToCenter = pointDistance({x: myRadarChart.scale.xCenter, y: myRadarChart.scale.yCenter}, activePoints[0]); if (eventLocDistToCenter < activePointDistToCenter) { activePoints[0].value--; } else { activePoints[0].value++; } myRadarChart.update(); }); 

注意，我还添加了对.update()的调用，以便图表立即呈现更改。 通过实现它的方式，在下一次渲染之前（即鼠标移动时），您将看不到图表的变化。

这是一个使用工作解决方案从您的分叉开始的代码。 点击查看即可查看。

最后，您可能想要考虑升级到chart.js 2.0（最新版本是2.5）。 由于不受支持，1.0很长，最新版本有很多改进。 你应该可以轻松地移植它。 如果您需要帮助，请发布一个新问题。