javascript - ChartJS onclick填充区域(雷达图)

Question

我正在尝试在 JQuery 中创建一个函数来增加和减少点击的点。我已经成功创建了增加点数的 onclick 事件，但不知道如何减少它。

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

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

我查看了 ChartJS 文档，但没有找到它。其他图表确实有它，例如极地面积图，当您将鼠标悬停在某个部分时，它会突出显示，这意味着有一个功能可以检测鼠标悬停在部分上。

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

我的codepen .

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

我能想到的唯一选择是创建 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() 的调用，以便图表立即呈现更改。按照您实现的方式，您不会看到图表发生变化，直到下一次渲染(即当鼠标移动时)。

这是一个codepen从你的工作解决方案中 fork 出来。单击周围查看。

最后，您可能需要考虑升级到 Chart.js 2.0(最新版本是 2.5)。 1.0 早已不受支持，最新版本有很多改进。您应该能够轻松地将其移植过来。如果您需要帮助，请发布新问题。