ChartJS onclick填充区域（雷达图）

提问者：小点点

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个标签。按钮将是+和-，增加和减少标签。在我看来，这占用了太多的空间，所以我在尽量避免。

谢谢,

共1个答案

匿名用户

实际上没有特定的Chart.js API来完成您想要的操作，但是使用canvas API和一些几何图形可以获得相同的结果。

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

我修改了您的click处理程序来实现这一点。

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长期不受支持，最新版本有很多改进。你应该可以很容易地把它移植过来。如果你需要帮助，可以发布一个新的问题。