Javascript 如何在chart.js中为图表和工具提示设置不同的值？

我想使用chart.js中的雷达图来显示与平均值相比的几个属性

例如，我可能想显示特定人群的

尺寸

、

体重

和

ipd

（瞳孔间距离）与平均值的比较

现在，如果我简单地把原始数字输入到图表中，那看起来会很奇怪，因为每个属性的值不能相互比较，会以一种奇怪的方式拉伸雷达图。因此，我所做的是从每个属性中提取一个比率，并将其作为数据输入。例如，如果某人比平均身高高10%，这可能意味着我的身高是

1.10

，如果某人比平均体重轻5%，我的体重是

0.95

但是现在当鼠标悬停在数据点上时，工具提示会显示我作为数据值输入的比率，因此工具提示会告诉我

Size:1.10

。我希望工具提示中有真实值，比如

Size:1.85m

如何获得与用于绘制图表的实际数据不同的“工具提示值”？我现在的代码如下

HTML:

---

您可以使用函数完成此操作

var ctx=document.getElementById（'chart-human'）；
var real_数据=[
[185万英镑、100磅、120%]，
[195万、90磅、150%]
];
风险值数据={
标签：[“尺寸”、“重量”、“IPD”]，
数据集：[{
标签：“山姆·史密斯”，
数据：[1.10,0.95,1.23]，
背景颜色：“rgba（0119204,0.2）”，
边框颜色：“rgba（0119204，0.5）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}, {
标签：“John Doe”，
数据：[1.20,0.85,1.43]，
背景颜色：“rgba（255,0,0,0.15）”，
边框颜色：“rgba（255,0,0,0.45）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}, {
标签：'平均'，
数据：[1,1,1]，
背景色：“rgba（0,255,0,0.15）”，
边框颜色：“rgba（0,255,0,0.45）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}]
};
变量选项={
工具提示：{
回调：{
标题：功能（t，d）{
设title=d.datasets[t[0].datasetIndex].label；
返回标题；
},
标签：功能（t，d）{
设title=d.datasets[t.datasetIndex].label；
设label=d.labels[t.index]；
让值=（title！=“Average”）？真实数据[t.datasetIndex][t.index]：d.datasets[t.datasetIndex].数据[t.index]；
返回标签+'：'+值；
}
}
}
};
var图表=新图表（ctx{
类型：“雷达”，
数据：数据，
选项：选项
});
您可以使用函数来完成此操作


var ctx=document.getElementById（'chart-human'）；
var real_数据=[
[185万英镑、100磅、120%]，
[195万、90磅、150%]
];
风险值数据={
标签：[“尺寸”、“重量”、“IPD”]，
数据集：[{
标签：“山姆·史密斯”，
数据：[1.10,0.95,1.23]，
背景颜色：“rgba（0119204,0.2）”，
边框颜色：“rgba（0119204，0.5）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}, {
标签：“John Doe”，
数据：[1.20,0.85,1.43]，
背景颜色：“rgba（255,0,0,0.15）”，
边框颜色：“rgba（255,0,0,0.45）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}, {
标签：'平均'，
数据：[1,1,1]，
背景色：“rgba（0,255,0,0.15）”，
边框颜色：“rgba（0,255,0,0.45）”，
边框宽度：1，
pointBackgroundColor:'rgba（0,0,0,0.4）'
}]
};
变量选项={
工具提示：{
回调：{
标题：功能（t，d）{
设title=d.datasets[t[0].datasetIndex].label；
返回标题；
},
标签：功能（t，d）{
设title=d.datasets[t.datasetIndex].label；
设label=d.labels[t.index]；
让值=（title！=“Average”）？真实数据[t.datasetIndex][t.index]：d.datasets[t.datasetIndex].数据[t.index]；
返回标签+'：'+值；
}
}
}
};
var图表=新图表（ctx{
类型：“雷达”，
数据：数据，
选项：选项
});


<canvas id="chart-human"></canvas>

var ctx = document.getElementById('chart-human');
var data = {
    labels: ['Size', 'Weight', 'IPD'],
    datasets: [
        {
            label: 'Sam Smith',
            data: [1.10, 0.95, 1.23]
        },
        {
            label: 'Average',
            data: [1, 1, 1]
        }
    ]
};
var options = {};
var chart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});