Javascript 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文档，没有发现它。其他图表也有，例如极区图，当您将鼠标悬停在某个区段上时，它会高亮显示，这意味着有一个功能可以检测鼠标悬停在区段上的情况

雷达图中是否存在类似的功能

我的

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

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

---

谢谢，

确实没有特定的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.js2.0，最新版本是2.5。1.0早就不受支持了，最新版本有很多改进。您应该能够轻松地将其移植过来。如果您需要帮助，请发布一个新问题。

这太棒了，有了.update功能，这正是我想要的功能。谢谢