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

【问题标题】：Chart.js Bar graph with percentage valuesChart.js 带有百分比值的条形图
【发布时间】：2016-12-06 11:57:27
【问题描述】：

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

【问题讨论】：

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

目前还没有开箱即用的版本。您可能需要在设置图表之前通过计算百分比来手动进行一些操作，例如按照此示例创建图表： https://stackoverflow.com/a/40438511/6638478

【讨论】：

【解决方案4】：

关于使用toLocaleString 函数

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

【讨论】：

不错，但适合线，不是馅饼

【解决方案5】：

我用它来为 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,
      },
    },
  ],
},

};

【讨论】：

【解决方案6】：

使用 Chart.js 3，您可以这样做：

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

【讨论】：