无法为Chartjs工具提示生成所需的UI输出。

Question

我有以下方案：x-axes。String datey -axes: 整数

2套数据

当我把鼠标悬停在一个特定的数据点上时，我想显示以下内容。

Data collected as of 2020-06-02
33,600
33,000
Diff: 600

我得到的是这样的结果：

Data collected as of undefined
33,600
33,000
Diff: NaN

这是我的tooltip回调代码:

tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      title: function(toolTipItem, data) {
        return "Data points collected as of " + toolTipItem.xLabel;
        // return "Data points collected as of " + data.labels[toolTipItem.index];  // this did not work either
      },
      label: function(toolTipItem, data) {
        if (toolTipItem.datasetIndex === 0) {
          return toolTipItem.yLabel.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
        } else if (toolTipItem.datasetIndex === 1) {
          return toolTipItem.yLabel.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
        }
      },
      labelColor: function(toolTipItem, data){
        if (toolTipItem.datasetIndex === 0) {
          return {
            borderColor: 'rgba(196, 196, 196, 1)'
          };
        } else if (toolTipItem.datasetIndex === 1) {
          return {
            borderColor: 'rgba(127, 231, 106, 1)'
          };
        }
      },
      footer: function(toolTipItems, data) {
        let diff = 0;
        diff = parseInt(data.datasets[0].data[toolTipItems.index]) - parseInt(data.datasets[1].data[toolTipItems.index]);
        return 'Diff: ' + diff;  
        // return 'Diff: ' + diff.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');  // this did not work either
      }
    }
  },

我遵循了这里的示例。来自chartjs的tooltip回调用例示例：

说了这么多，想知道文档中的原因。chartjs docs有时参数是ToolTipItem[]，有时是ToolTipItem。我是不是遗漏了什么？

谢谢。

Answer 1

我知道我哪里出错了，是什么原因造成了这种混乱。

在labelColor属性下，我只需要对toolTipItem.datasetIndex进行等价检查。这让我相信，我可以直接调用属性。然而，当涉及到任何其他属性时（我尝试了标题、页脚、afterBody），toolTipItem.datasetIndex并不存在，当我打印出toolTipItem的键时，我得到了[0，1]。当我进一步扩展toolTipItem[0]和toolTipItem[1]的值时，我发现了一个我正在寻找的属性列表（即index，xyLabel...）。

这最终帮助我解决了这个问题。所以我需要做的是

...    
return "Data points collected as of " + toolTipItem[0].xLabel
...

对于标题属性和:

...
    diff = parseInt(data.datasets[0].data[toolTipItems[0].index]) - parseInt(data.datasets[1].data[toolTipItems[1].index]);
...

我仍然不知道为什么如果我没有指定工具提示项的索引，标签& 标签颜色仍然可以发挥作用，但不管是什么情况，现在已经解决了。如果有人能指出我是否有一个bug等待发生，这将是非常感激。