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

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

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

它是这样设置的:

const chartData = {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
        fill: true,
        backgroundColor: 'rgba(6,211,248,0.5)',
        borderColor: 'rgb(6,211,248)',
        data: mockData.presetValues.a,
    }]
};
const chartConfig = {
    type: 'radar',
    data: chartData,
    options: {
        elements: {
            line: {
                borderWidth: 3
            },

        },
        scales: {
            r: {
                min: 0,
                max: 5,
                ticks: {
                    stepSize: 1,
                    callback: function (value) {
                        return ['none', 'low', 'mid-low', 'mid', 'mid-high', 'high'][value]
                    }
                },
                grid: {
                    circular: true,
                    lineWidth: 5
                },
                angleLines: {
                    color: 'black',

                }

            }
        },
        plugins: {
            legend: {
                display: false
            }
        },
        events: ['click']
    }
};
const actionChart = new Chart(
    canvas,
    chartConfig
);

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

canvas.addEventListener('click', handleChartClick)

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

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

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

umuewwlo

umuewwlo1#

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

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

相关问题