带有多个Y轴的Charts.js图。

Question

我试图使用Charts.js添加一个带有多个y轴的图表，但它无法工作。我试着按照所有的文档进行操作，但无论我怎么做，第二个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.
    }
});

对我来说，这个结果是这样的（由于你没有提供虚假的输入）：