График Charts.js с несколькими осями Y

Question

График Charts.js с несколькими осями Y

1

Я пытаюсь добавить диаграмму, используя 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, чтобы она выполнялась как шкала.

Mike Hawkins 12 июль 2018, в 05:47

Источник

Теги:

javascript

chart.js

1 ответ

Ещё вопросы

timclutton · Accepted Answer · 2018-07-12T06-48-00.000Z

Ваши проблемы представляют собой сочетание опечаток и неправильных имен/типов свойств.

Здесь фиксированная версия с аннотированными изменениями:

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.
    }
});

Для меня это дает (с фальсифицированными входами, поскольку вы их не предоставляли):