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

我想制作一个y轴上有百分比值的图表，但在文档中找不到任何选项。请给出一些答案，不要认为有现成的答案。 在设置图表之前，您可能需要手动计算百分比，例如，按照以下示例创建图表：

---

如果您有一个静态总计…比如最大值800，您可以这样显示自定义刻度：

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

---

你可以这样做：

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

如果知道数据集中表示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',
      },
    },
  ],
},

---

使用

toLocaleString

功能

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

---

我用这个来增加yaxis的百分比-

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

---

})

很好，但适合做线，不是馅饼