javascript - Chart.js 在左侧 Y 上显示美元金额，在右侧 Y 上显示百分比金额

Question

我正在运行以下语法，它会按应有的方式显示我的组合图表。但是，我遇到的问题是数组值包含 $ 金额并显示在 Y 轴的左侧，数组 values1 包含 % 金额并且始终位于底部，因为 $ 总是高于%'边

我的想法是，是否可以在 Y 轴的左侧显示 $ 金额，在 Y 轴的右侧显示 % 金额，并将线数据映射到 %，并将条形数据映射到$的

这是我目前的语法:

var labelsarr = ['George 11', 'George 12', 'Fred 11', 'Fred 12', 'Sage 11', 'Sage 12'];
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsarr,
        datasets: [
            {
                type: 'line',
                fill: false,
                label: 'Line Data',
                backgroundColor: 'rgba(255,0,0,1)',
                borderColor: 'rgba(255,0,0,1)',
                data: values1
            },
            {
                label: 'Bar Data',
                backgroundColor: 'rgba(0, 129, 214, 0.8)',
                data: values
            }
        ]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function (t, d) {
                    if (t.datasetIndex === 0) {
                        var xLabel = d.datasets[t.datasetIndex].label;
                        var yLabel = t.yLabel + '%';
                        return xLabel + ': ' + yLabel;
                    } else if (t.datasetIndex === 1) {
                        var xLabel = d.datasets[t.datasetIndex].label;
                        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '$' + t.yLabel;
                        return xLabel + ': ' + yLabel;
                    }
                }
            }
        },
        legend: {
            display: false,
            position: 'top',
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function (value, index, values) {
                        if (parseInt(value) >= 1000) {
                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        } else {
                            return '$' + value;
                        }
                    }
                }
            }]
        }
    },
    plugins: [{
        beforeDraw: function (chart) {
            var labels = chart.data.labels;
            labels.forEach(function (e, i) {
                var bar = chart.data.datasets[1]._meta[0].data[i]._model;
                var dataPoint = e.split(/\s/)[1];
                if (dataPoint === '16')
                    bar.backgroundColor = 'blue';
                else if (dataPoint === '17')
                    bar.backgroundColor = 'green';
            });
        }
    }]
});

Answer 1

ꜰɪʀꜱᴛ

为您的第一个数据集设置 yAxisID: 'y-axis-1'，如下所示:

...
datasets: [{
   type: 'line',
   fill: false,
   label: 'Line Data',
   backgroundColor: 'rgba(255,0,0,1)',
   borderColor: 'rgba(255,0,0,1)',
   data: [3, 4, 10, 5, 8, 7],
   yAxisID: 'y-axis-1' //<- set this
}, {
   ...
}]
...

^{这是将数据集映射到右 y 轴}

ꜱᴇᴄᴏɴᴅ

向 yAxes 数组添加另一个 y 轴(用于百分比数量)，如下所示:

...
scales: {
   yAxes: [{
      ...
   }, {
      id: 'y-axis-1',
      position: 'right',
      ticks: {
         beginAtZero: true,
         callback: function(value, index, values) {
            return value + '%';
         }
      }
   }]
}
...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var labelsarr = ["George 11", "George 12", "Fred 11", "Fred 12", "Sage 11", "Sage 12"];
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Line Data',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: [3, 4, 10, 5, 8, 7],
         yAxisID: 'y-axis-1'

      }, {
         label: 'Bar Data',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: [12, 19, 3, 5, 2, 3]
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               if (t.datasetIndex === 0) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel + '%';
                  return xLabel + ': ' + yLabel;
               } else if (t.datasetIndex === 1) {
                  var xLabel = d.datasets[t.datasetIndex].label;
                  var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                  return xLabel + ': ' + yLabel;
               }
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }, {
            id: 'y-axis-1',
            position: 'right',
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  return value + '%';
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[1]._meta[0].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '16')
               bar.backgroundColor = 'blue';
            else if (dataPoint === '17')
               bar.backgroundColor = 'green';
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>