javascript - 为折线图上的每个点添加文本作为工具提示

Question

我想知道如果我将鼠标悬停在折线图上的单个点上，ChartJS 中是否有一个选项可以让我看到额外的信息。目前我的数据是这样的:

function drawChart(dataSets) {
    Chart.defaults.global.maintainAspectRatio = false;
    Chart.defaults.global.responsive = false;
    var data = {
        labels: ["ID"]
        , datasets: dataSets
    };
    var options = {
        title: {
            display: true
            , text: 'Custom Chart Title'
        }
        , scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
            , xAxes: [{
                type: "linear"
                , position: "bottom"
            }]
        }
        , tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    alert("Entered tooltip callback.");
                    return i18n.t('chart.count') + ': ' + getCount(tooltipItem, data.datasets);
                }
            }
        }
    };
    var myChart = Chart.Line(ctx, {
        data: data
        , options: options
    });
}

function getCount(tooltipItem, datasets) {
    return datasets[tooltipItem.datasetIndex].data.find(datum => {
        return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel;
    }).count;
}

这是一个数据点的样子:

x:5
, y:5
, count:2

但是 alert “Entered tooltip” 永远不会被调用，我做错了什么？相反，我在我的控制台 (Google Chrome) 上收到此错误:

Answer 1

我添加自定义工具提示的方式。 首先，我创建了一个数据集，我在其中添加了附加信息，如“计数”

x: 10,
y: 12,
count: 2

此计数不会显示在图表中，除非我在工具提示下的选项 Hook 中手动获取它。

tooltips: {
      callbacks: {
                label: function(tooltipItem, data) {
                    return i18n.t('chart.count') +': ' + getCount(tooltipItem, data.datasets);
                }
      }
 }

获取未在图表中表示的给定数据集的计数

function getCount(tooltipItem, datasets) {
    return datasets[tooltipItem.datasetIndex].data.find(datum => {
        return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel;
    }).count;
}

结果: 编辑:添加我的数据集示例

return [{
    label: 'Example dataset',
    backgroundColor: '#98cc99',
    borderColor: '#98cc99',
    pointHoverRadius: 3,
    data: [ {x:1,y:2,count:3}, {x:2,y3,count:4}, ...]
}];