Chart.js - 如何显示标签的值作为X和Y值的百分比 - 目前始终为100％

Question

我正在使用Chart.js以及Chart.js插件，图表标签。我想在条形图的顶部显示标签，并在标签中显示x值相对于y值的百分比（例如，16是17的94％），但标签值始终为100 ％（看起来好像是16x计算16x = 100）。

没有插件我没有办法做到这一点，所以我不确定插件是否是问题，或者图表配置是否错误。

任何建议/帮助表示赞赏！这是一个带有代码的JSBin：https://jsbin.com/dawenetuya/edit?html,js,output

HTML和JS：

<div style="width: 100%;"><canvas id="myChart"></canvas></div>

var colors = '#cd1127';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
                labels: ["Asset Taxes", "Excluded Assets", "Personal Injury and Property Damage", "Offsite Disposal", "Royalties", "Litigation", "Employment", "Operating Expenses"],
                datasets: [{
                        data: [16, 14, 17, 13, 15, 12, 9, 11],
                        backgroundColor: '#cd1127',
                        borderColor: '#cd1127',
                        borderWidth: 1
                }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 18,
                        beginAtZero:true
                    }
                }]
            },
            plugins: {
                labels: {
                    render: 'percentage',
                    showActualPercentages: true
                }
            }
        }
});

这是一个截图，说明了我的目标：

Answer 1

你可以像这样创建自己的渲染函数：

...

render: function (args) {  
  let max = 17; //This is the default 100% that will be used if no Max value is found
  try {
    //Try to get the actual 100% and overwrite the old max value
    max = Object.values(args.dataset.data).map((num) => {
      return +num; //Convert num to integer
    });
    max = Math.max.apply(null, max);
  } catch (e) {}
  return Math.round(args.value * 100 / max);
}

...

以下是示例代码：https://jsbin.com/hihexutuyu/1/edit

您实际上可以擦除try/catch块并仅定义max值，它将起作用。它看起来像这样：

...

render: function (args) {  
  let max = 17; //Custom maximum value

  return Math.round(args.value * 100 / max);
}

...

try/catch块仅用于自动从数据集中获取最大值。

插件文档以及可添加到render的所有其他可能设置如下：https://github.com/emn178/chartjs-plugin-labels。

Answer 2

我不确定我是否完全掌握了你想要实现的目标，但你可以使用回调函数在yAxes中生成所需的结果，类似于：

yAxes:[{
    ticks:{
        callback:function(value,index,values){
            return ((value / index) * 100)+'% ';
        }
    }
}]