时间戳

首页 > 解决方案 > 无法为 Chartjs 工具提示生成所需的 UI 输出

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

问题描述

我有以下情况： x 轴：字符串日期 y 轴：整数

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

这是我的工具提示回调代码：

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 的示例工具提示回调用例

话虽如此，想知道为什么在文档中：chartjs docs 有时参数是 ToolTipItem[] 有时是 ToolTipItem。我错过了什么吗？

谢谢。

标签： reactjschart.jsreact-chartjs

解决方案

我弄清楚我哪里出错了，是什么导致了混乱。

在 label/labelColor 属性下，我只需要对 toolTipItem.datasetIndex 执行相等的检查。这让我相信我可以直接调用属性。但是，当涉及到任何其他属性时（我尝试了 title、footer、afterBody），toolTipItem.datasetIndex 不存在，当我打印出 toolTipItem 的键时，我得到了 [0, 1]。在进一步扩展 toolTipItem[0] 和 toolTipItem[1] 的值后，我发现了我正在寻找的属性列表（即索引、x/yLabel..）。

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

...    
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]);
...

如果我没有为 toolTipItem 指定索引，我仍然不确定 label 和 labelColor 是如何起作用的，但不管是什么情况/现在都解决了。如果有人能指出我是否有等待发生的错误，将不胜感激。

推荐阅读