从页面上的其他位置触发ChartJS点悬停

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

我正在使用chartjs生成一个折线图,每个元素都有点。当前,悬停在图上的一个点上会触发该数据点的工具提示。是否可以从页面的其他位置触发此mouseover事件(以及生成的工具提示)?(更具体地说,悬停在表中的一行上会触发图上相应的数据点)

function render_graph(input) {
            // setup block
            const data = {
                datasets: [{
                    type: 'line',
                    parsing: {
                        yAxisKey: 'Average Pace',
                        xAxisKey: 'Date',
                    },
                    label: '# of Votes',
                    radius: 3,
                    data: arr,
                    backgroundColor: 'red',
                    borderColor: 'red',
                    borderWidth: 1,
                    label: "Pace",
                }]
            }

            // config block
            const config = {
                data,
                options: {
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'year'
                            }
                        },
                        y: {
                            suggestedMin: 360,
                            suggestedMax: 900,
                            ticks: {
                                stepSize: 30,
                                padding: 2,
                                callback: function(value, index, ticks) {
                                    minutes = Math.floor(value / 60);
                                    seconds = value % 60;
                                    if (seconds == 0) {
                                        seconds = "00";
                                    }
                                    x = minutes + ':' + seconds;

                                    return x;
                                }
                            },                   
                        }
                    },
                }
            };

            // render / init block
            const myChart = new Chart(
                document.getElementById('myChart'),
                config
            );
            return myChart;
        }
vmjh9lq9

vmjh9lq91#

你可以使用setActiveElements工具提示/图表API。下面是一段代码来展示它是如何工作的。
第一个

相关问题