Javascript rLabel的ChartJS v2自定义工具提示

我有一个三维的ChartJS（v2）气泡图：x、y和r（气泡半径）

以下是用于自定义工具提示的代码：

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

的值

---

有人知道这个问题的解决方案吗？

标签值不是工具提示项的属性，这就是为什么它给出了未定义的属性。我从数据对象访问该值

  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.';
                    }
                }
            }
        }
    });

---

在尝试了几个小时后，在我的例子中，我需要在

rLabel

之前添加

var

否则，它只是不断提醒我开发人员控制台中有一个js错误

就我而言：

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var 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.';
    }
  }
}

---

不过，非常感谢Sanjay Dutt的回答

谢谢！工作起来很有魅力。一个小东西的标签显示为17位小数。有没有办法限制小数的数量？@Wessi您可以

Math.round（num）

对num的值进行四舍五入，或者在stackoverflow上有另一篇文章将数字四舍五入到两位。

this may help in solving the build error.

 label: function(tooltipItem, data) {
        let radiusArr:any;
        radiusArr = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        let rLabel = radiusArr.r;
        let datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
        return rLabel + ' xxx are ' + datasetLabel;
    },