Javascript Chart.js在左边Y显示美元金额，在右边Y显示百分比金额

我正在运行下面的语法，它显示了我的组合图。但是，我遇到的问题是，数组值包含$amounts并显示在Y轴的左侧，数组值1包含%amounts并始终位于底部，因为$始终高于%'side

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

这是我当前的语法：

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';
            });
        }
    }]
});

---

ꜰɪʀꜱᴛ

为第一个数据集设置yAxisID:“y轴-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
}, {
   ...
}]
...

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

var labelsarr=[“乔治11”、“乔治12”、“弗雷德11”、“弗雷德12”、“圣人11”、“圣人12”]；
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：labelsarr，
数据集：[{
键入：“行”，
填充：假，
标签：“行数据”，
背景颜色：“rgba（255,0,0,1）”，
边框颜色：“rgba（255,0,0,1）”，
数据：[3,4,10,5,8,7]，
yAxisID:'y轴-1'
}, {
标签：“条形图数据”，
背景颜色：“rgba（0，129，214，0.8）”，
数据：[12,19,3,5,2,3]
}]
},
选项：{
工具提示：{
回调：{
标签：功能（t，d）{
if（t.datasetIndex==0）{
var xLabel=d.datasets[t.datasetIndex].label；
var yLabel=t.yLabel+'%'；
返回xLabel+'：'+yLabel；
}else if（t.datasetIndex==1）{
var xLabel=d.datasets[t.datasetIndex].label；
var yLabel=t.yLabel>=1000？'$'+t.yLabel.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”：'$'+t.yLabel；
返回xLabel+'：'+yLabel；
}
}
}
},
图例：{
显示：假，
位置：'顶部'，
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
如果（parseInt（值）>=1000）{
返回“$”+value.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}否则{
返回“$”+值；
}
}
}
}, {
id:'y轴-1'，
位置：'右'，
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
返回值+'%'；
}
}
}]
}
},
插件：[{
绘制前：函数（图表）{
var标签=chart.data.labels；
标签.forEach（函数（e，i）{
var bar=chart.data.datasets[1]。\u meta[0]。data[i]。\u model；
var dataPoint=e.split（/\s/）[1]；
如果（数据点=='16'）
bar.backgroundColor='蓝色'；
else if（数据点=='17'）
bar.backgroundColor='绿色'；
});
}
}]
});


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