我想制作一个y-axis上有百分比值的图表,但我在文档中找不到任何选项。请给出一些答案
y-axis
7ajki6be1#
你可以这样做:如果您知道数据集中表示100%的绝对值,则可以将其传递给选项对象:
scales: { yAxes: [ { ticks: { min: 0, max: this.max,// Your absolute max value callback: function (value) { return (value / this.max * 100).toFixed(0) + '%'; // convert it to percentage }, }, scaleLabel: { display: true, labelString: 'Percentage', }, }, ], },
f87krz0w2#
使用Chart.js 3,您可以执行以下操作:
const options = { scales: { y: { ticks: { format: { style: 'percent' } } } } };
pw136qt23#
如果您有一个静态总计...比如说最大值为800,您可以如下所示显示自定义分笔成交点:
ticks: { //.. Other settings stepSize: 200, /* total/4 shows 0, 25%, 50%, 75%, 100% */ callback: function(value, index, values) { return ((value / 800) * 100) + '%'; } }
qyyhg6bp4#
不要认为有现成的版本。你可能要做一点手工计算百分比之前,设置图表,例如,按照这个例子来创建图表:https://stackoverflow.com/a/40438511/6638478
d7v8vwbk5#
使用toLocaleString函数
toLocaleString
scales: { yAxes: [ { ticks: { callback: function (value) { return value.toLocaleString('de-DE', {style:'percent'}); }, } }, ], },
s4chpxco6#
我使用这些选项将百分比添加到yAxes:
yAxes
const options = { showLines: true, scales: { yAxes: [ { ticks: { min: 0, max: 100, stepSize: 20, callback: function (value) { return (value / this.max * 100).toFixed(0) + '%'; // convert it to percentage }, }, type: "linear", display: true, position: "left", id: "y-axis-1", gridLines: { drawOnArea: false, }, }, ], }, };
6条答案
按热度按时间7ajki6be1#
你可以这样做:
如果您知道数据集中表示100%的绝对值,则可以将其传递给选项对象:
f87krz0w2#
使用Chart.js 3,您可以执行以下操作:
pw136qt23#
如果您有一个静态总计...比如说最大值为800,您可以如下所示显示自定义分笔成交点:
qyyhg6bp4#
不要认为有现成的版本。你可能要做一点手工计算百分比之前,设置图表,例如,按照这个例子来创建图表:https://stackoverflow.com/a/40438511/6638478
d7v8vwbk5#
使用
toLocaleString
函数s4chpxco6#
我使用这些选项将百分比添加到
yAxes
: