无法为Chartjs工具提示生成所需的UI输出 [英] Unable to produce desired UI output for Chartjs tooltips

问题描述

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

I have the following scenario: x-axes: String date y-axes: Integers

2个数据集

当我将鼠标悬停在特定数据点上时，我想显示以下内容:

When i hover over a particular data point, i want to display the following:

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

这是我得到的:

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

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

Here is my tooltip callbacks code:

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

I have followed the sample here: Sample tooltip callback use case from chartjs

话虽如此，想知道为什么在文档中:

Having said that, would like to know why in the documentation: chartjs docs Sometimes the argument is ToolTipItem[] and sometimes it is ToolTipItem. Am i missing something?

谢谢.

推荐答案

我弄清楚哪里出了问题以及引起混乱的原因.

I figured out where I went wrong and what caused the confusion.

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

Under the label/labelColor attribute, I merely had to perform an equal check on toolTipItem.datasetIndex. This lead me to believe that I could call the attributes directly. However, when it came to any other attributes (i tried title, footer, afterBody), toolTipItem.datasetIndex did not exist and when i printed out the keys of the toolTipItem, i got [0, 1]. Upon further expansion of what the values of toolTipItem[0] and toolTipItem[1], i discovered a list of attributes which i was looking for (i.e. index, x/yLabel..).

这最终帮助我解决了这个问题.所以我要做的就是:

This ultimately helped me solved the issue. So all i needed to do was:

...    
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指定索引，labelColor仍然可以起作用，但是无论如何，现在都可以解决.如果有人指出我是否有错误等待发生，将不胜感激.

I am still not sure how come label & labelColor still could function if I did not specify the index for toolTipItem, but whatever the case is/was it is solved now. If someone could point out if i have a bug waiting to happen, it will be greatly appreciated.

这篇关于无法为Chartjs工具提示生成所需的UI输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！