javascript - rLabel 的 ChartJS v2 自定义工具提示

Question

我有一个 ChartJS (v2) 气泡图，具有三个维度:x、y 和 r(气泡半径)。

已关注 this answer ，我有这个用于自定义工具提示的代码:

tooltips: {
  callbacks: {
    label: function (tooltipItem, data) {
      var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
      return datasetLabel + ' : ' + tooltipItem.rLabel + '% has price of ' + tooltipItem.yLabel + ' USD';
    }
  }
}

除了 tooltipItem.rLabel 显示为 undefined 之外，它几乎可以工作。如果我输入 tooltipItem.xLabel，工具提示将正确显示 x 的值。但是，我想显示 r 的值。

有人知道这个问题的解决办法吗？

Answer 1

rLabel 值不是 tooltipItem 的属性，这就是它给出未定义的原因。我从数据对象访问该值。

  tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r;
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.';
                    }
                }
            }

下面是相同的工作代码。

var data = {
        datasets: [
            {
                label: 'First Dataset',
                data: [
                    {
                        x: 20,
                        y: 30,
                        r: 15
                    },
                    {
                        x: 40,
                        y: 10,
                        r: 10
                    }
                ],
                backgroundColor:"#FF6384",
                hoverBackgroundColor: "#FF6384",
            }
        ]
    };
    var myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: data,
        options: {
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        rLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r;
                        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ' : ' + rLabel + '% har pris på ca. ' + tooltipItem.yLabel + ' kr.';
                    }
                }
            }
        }
    });