ChartJS v2 rLabel的自定义工具提示

时间:2016-12-23 22:43:38

标签: javascript chart.js

我有一个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

的值

有没有人知道这方面的解决方案?

3 个答案:

答案 0 :(得分:4)

rLabel 值不是 tooltipItem 的属性,这就是为什么它给出了undefined的原因。我从数据对象中访问该值。

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

答案 1 :(得分:1)

经过数小时的尝试,事实证明,我需要在var之前添加rLabel ...

否则,它会不断提醒我开发者控制台中出现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的回答!

答案 2 :(得分:0)

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;
    },