Chart.js带百分比值的条形图

r7xajy2e  于 2022-11-06  发布在  Chart.js
关注(0)|答案(6)|浏览(249)

我想制作一个y-axis上有百分比值的图表,但我在文档中找不到任何选项。请给出一些答案

7ajki6be

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',
      },
    },
  ],
},
f87krz0w

f87krz0w2#

使用Chart.js 3,您可以执行以下操作:

const options = {
    scales: {
        y: {
            ticks: {
                format: {
                    style: 'percent'
                }
            }
        }
    }
};
pw136qt2

pw136qt23#

如果您有一个静态总计...比如说最大值为800,您可以如下所示显示自定义分笔成交点:

ticks: {
    //.. Other settings
    stepSize: 200, /* total/4 shows 0, 25%, 50%, 75%, 100% */             
    callback: function(value, index, values) {
        return ((value / 800) * 100) + '%';
    }
}
qyyhg6bp

qyyhg6bp4#

不要认为有现成的版本。你可能要做一点手工计算百分比之前,设置图表,例如,按照这个例子来创建图表:https://stackoverflow.com/a/40438511/6638478

d7v8vwbk

d7v8vwbk5#

使用toLocaleString函数

scales: {
  yAxes: [
    {
      ticks: {
        callback: function (value) {
          return value.toLocaleString('de-DE', {style:'percent'});
        },
      }
    },
  ],
},
s4chpxco

s4chpxco6#

我使用这些选项将百分比添加到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,
          },
        },
    ],
  },
};

相关问题