Chart.js具有百分比值的条形图

Question

我想制作一个在y轴上具有百分比值的图表,但我无法在文档中找到任何选项.请提出一些答案

Answer 1

使用 Chart.js 3，您可以执行以下操作：

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

Answer 2

您可以执行以下操作：

如果您知道代表数据集中100％的绝对值，则可以将其传递给options对象：

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

Answer 3

如果您有一个静态总数...说最大值为 800，您可以像这样显示自定义刻度：

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

Answer 4

不要以为还有开箱即用的版本.您可能需要通过在设置图表之前计算百分比来手动执行此操作,例如,按照此示例创建图表:https: //stackoverflow.com/a/40438511/6638478