我正在使用 React ChartJS 2 创建一些图表,但我想在它们的顶部显示一个带有百分比的标签,当我将鼠标悬停在它们上方时显示实际数字。我发现您可以使用选项对象上的上下文来执行类似的操作。
var options = {
tooltips: {
enabled: false
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = datasets[0].data.reduce((a, b) => a + b, 0);
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
}
};
var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: data
},
options: options
});
像这样,但我的问题是我无法找到在选项中使用上下文的方法。
有人知道怎么做吗?
最佳答案
您不必手动将 context
传递给数据标签的 formatter
函数,因为插件会自行处理。
这是一个 working example具有上述指定选项的饼图。
但是如果你想在你想传递给options
的一些其他函数中访问图表的context
,那么你可以通过图表实例使用this.chart.ctx
。
var options = {
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx; // chart context
}
}
};
关于javascript - 将上下文传递给 React ChartJS 2 上的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54040320/