我有一个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
。
有没有人知道这方面的解决方案?
答案 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;
},