获取与Chart.js上的单击距离最近的交集

e0bqpujr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(134)

我正在使用chart.js制作一个雷达图,用户应该能够自己进行交互,其想法是,如果用户点击了红色点,应用程序应该知道绿色点是否是刻度线和Angular 线最近的交点,这样它就可以将索引1(对应于B)处的数据集值从2(对应于中低)更改为4(对应于中高)。

它是这样设置的:

  1. const chartData = {
  2. labels: ['A', 'B', 'C', 'D'],
  3. datasets: [{
  4. fill: true,
  5. backgroundColor: 'rgba(6,211,248,0.5)',
  6. borderColor: 'rgb(6,211,248)',
  7. data: mockData.presetValues.a,
  8. }]
  9. };
  10. const chartConfig = {
  11. type: 'radar',
  12. data: chartData,
  13. options: {
  14. elements: {
  15. line: {
  16. borderWidth: 3
  17. },
  18. },
  19. scales: {
  20. r: {
  21. min: 0,
  22. max: 5,
  23. ticks: {
  24. stepSize: 1,
  25. callback: function (value) {
  26. return ['none', 'low', 'mid-low', 'mid', 'mid-high', 'high'][value]
  27. }
  28. },
  29. grid: {
  30. circular: true,
  31. lineWidth: 5
  32. },
  33. angleLines: {
  34. color: 'black',
  35. }
  36. }
  37. },
  38. plugins: {
  39. legend: {
  40. display: false
  41. }
  42. },
  43. events: ['click']
  44. }
  45. };
  46. const actionChart = new Chart(
  47. canvas,
  48. chartConfig
  49. );

然后,我为它设置了一个侦听器,如下所示:

  1. canvas.addEventListener('click', handleChartClick)

最后,我有一个这样的处理程序,这就是我的问题所在:

  1. function handleChartClick(ev) {
  2. let clickPosition = Chart.helpers.getRelativePosition(ev, actionChart);
  3. console.log(clickPosition);
  4. //Find closest tick to click and change values in dataset before refresh
  5. }

在搜索了文档和这个站点几个小时之后,我无法找到一种方法来将从getRelativePosition方法接收到的单击位置与Angular 线和刻度之间的交点位置关联起来。但如果有人能帮助我找出如何获得离单击最近的交叉点,我将非常感激。

umuewwlo

umuewwlo1#

您可以使用chart的onClick选项来捕获click事件(而不是在画布上添加一个侦听器)。这样,传递的事件已经被规范化。
回调可以是这样的,以便获得最接近的分笔成交点:

  1. options: {
  2. ...
  3. onClick(event, elements, chart) {
  4. const scale = chart.scales.r;
  5. const posY = Math.abs(scale.getDecimalForPixel(event.y) - 0.5);
  6. const posX = Math.abs(scale.getDecimalForPixel(event.x) - 0.5);
  7. const scalePosition = Math.max(posY, posX);
  8. const value = Math.round(scalePosition * 10);
  9. console.log(['none', 'low', 'mid-low', 'mid', 'mid-high', 'high'][value]); // shows value
  10. },
  11. ...

相关问题