Chart.js

Question

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

我还没有找到没有插件的方法，所以我不确定是插件问题还是图表配置错误。

任何 advice/help 不胜感激！这是一个带有代码的 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

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

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

Answer 2

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

...

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。

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

Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100%

javascript

percentage

chart.js2