具有多个 Y 轴的 Charts.js 图

Question

我正在尝试使用具有多个 y 轴的 Charts.js 添加图表，但它不起作用。我已经尝试按照那里的所有文档进行操作，但是无论我做什么，第二个 y 轴都不会显示。我知道数据很好，因为两个数据集都在显示 - 但它只使用第一个数据集的一个轴。这是我的javascript：

var myLineChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: "Total Commission",
                            data: d[0],
                            backgroundColor: background_colors,
                            hoverBackgroundColor: hover_background_colors,
                            yAxyesID: "id1"
                        },{
                            label: "# of Commissions",
                            data: d[1],
                            type: 'line',
                            yAxesID: "id2"
                        }],
                    },
                    options: {
                        responsive: true,
                        elements: {
                            line :{
                                fill: false
                            }
                        },
                        title: {
                            display: true,
                            position: 'bottom',
                            text: 'Commissions Paid',
                            fontSize: 14
                        },
                        scales: [{
                           yAxes: [{
                               display: true,
                               position: 'left',
                               type: "linear",
                                scaleLabel: {
                                    display: true,
                                    labelString: 'USD',
                                    beginAtZero: true,
                                },
                               yAxisID: "id1"
                            },{
                               scaleLabel: {
                                    display: true,
                                    labelString: 'Commissions',
                                    beginAtZero: true,
                                },
                               display: false,
                               type: "linear",
                               position:"right",
                               gridLines: {
                                   display: false
                               },
                               yAxisID: "id2"
                            }]
                        }]
                    }
                });

这是结果图的屏幕截图：

当您悬停时，底部的灰色小圆圈会显示正确的数字，但它不会创建单独的 y 轴以作为比例尺跟随。

Answer 1

您的问题是拼写错误和错误的属性名称/类型的混合。

这是一个固定版本，并注释了更改：

var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: "Total Commission",
            data: d[0],
            backgroundColor: background_colors,
            hoverBackgroundColor: hover_background_colors,
            //yAxyesID: "id1"
            yAxisID: "id1" // typo in property name.
        },{
            label: "# of Commissions",
            data: d[1],
            type: 'line',
            //yAxesID: "id2"
            yAxisID: "id2" // typo in property name.
        }],
    },
    options: {
        responsive: true,
        elements: {
            line :{
                fill: false
            }
        },
        title: {
            display: true,
            position: 'bottom',
            text: 'Commissions Paid',
            fontSize: 14
        },
        //scales: [{
        scales: { // Shouldn't be an array.
           yAxes: [{
               display: true,
               position: 'left',
               type: "linear",
                scaleLabel: {
                    display: true,
                    labelString: 'USD',
                    beginAtZero: true,
                },
               //yAxisID: "id1"
               id: "id1" // incorrect property name.
            },{
               scaleLabel: {
                    display: true,
                    labelString: 'Commissions',
                    beginAtZero: true,
                },
               //display: false,
               display: true, // Hopefully don't have to explain this one.
               type: "linear",
               position:"right",
               gridLines: {
                   display: false
               },
               //yAxisID: "id2"
               id: "id2" // incorrect property name.
            }]
        //}]
        } // Shouldn't be an array.
    }
});

对我来说，这会产生（使用伪造的输入，因为您没有提供这些输入）：