首页 > 解决方案 > 如何突出显示与 Chart.js 上的点对应的表格中的一行?

问题描述

编码:

var chart = new Chart('graph_data', {
type: 'line',
data: {
    labels: data.labels.labels,
    datasets: dataSets
},
options: {
    responsive: true,
    filler: {
        propagate: true
    },
    tooltips: {
        mode: 'index',
        intersect: false,
        callbacks: {
            title: function(i, val) {
                return attributeLabels[data.labels.type] +': '+ i[0].xLabel;
            },
        },
    },
}});

在此处输入图像描述

那么如何处理数据点区域的 mouseover 和 mouseout 事件呢?我尝试为工具提示部分添加回调,但它不会t looks correct and i can从鼠标悬停事件的行中删除 css 类。

tooltips: {
        mode: 'index',
        intersect: false,
        callbacks: {
            title: function(i, val) {
                $('#data-table > tbody > tr').eq(i[0].index).addClass('hover');
                return attributeLabels[data.labels.type] +': '+ i[0].xLabel;
            },
        },
    },

标签: javascriptchartschart.js

解决方案


推荐阅读