我正在尝试使用Chart.js2中的圆环图显示一些数据 .
我目前的图表如下所示:
我想要的输出必须显示另一个属性,即百分比,如下所示:
我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手 .
我的第一个图表的代码如下:
const renderCashCurrencyPie = (cashAnalysisBalances) => {
if (cashAnalysisBalances) {
const currenciesName = cashAnalysisBalances
.map(curName => curName.currency);
const availableCash = cashAnalysisBalances
.map(avCash => avCash.availableCash);
let currenciesCounter = 0;
for (let i = 0; i < currenciesName.length; i += 1) {
if (currenciesName[i] !== currenciesName[i + 1]) {
currenciesCounter += 1;
}
}
const currenciesData = {
labels: currenciesName,
datasets: [{
data: availableCash,
backgroundColor: [
'#129CFF',
'#0C6DB3',
'#FF6384',
'#00FFFF'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#00FFFF'
]
}]
};
2 回答
您可以使用图表选项工具提示配置部分自定义工具提示,如下所述:http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration
如下面的示例代码所示,您可以更改颜色,大小和样式等内容 . 查看上面链接的文档以获取可配置选项的完整列表 .
如果要将百分比添加到工具提示显示,可以使用tooltip callbacks . 该文档包含所有可能的可自定义回调字段的列表 .
在下面的示例中,我将“title”设置为显示标签名称,将“label”设置为显示值,并将百分比添加到“afterLabel” .
工作JSFiddle:https://jsfiddle.net/m7s43hrs/
根据@Tot Zam的回答,但为简洁起见使用箭头功能: