Question

我在chartjs V2 - https://jsfiddle.net/17mw40rx/

生成的条形图和折线图中有多个集合

显然，右手y轴未正确缩放或显示正确的标签。

理想情况下，我正在尝试显示图形，使左轴的最大值缩放到最高条的最大值。我希望右手y轴然后缩放到折线图值。

我是这样的：http://plnkr.co/edit/TvY5tz?p=info

有人可以提供帮助。

代码：

var entranceDataset = {
            label: 'IN',
            type: 'bar',
            yAxesID : "y-axis-1",
            data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3],
            backgroundColor: 'rgba(0, 204, 0, 0.2)',
            borderColor: 'rgba(0, 204, 0,1)',
            borderWidth: 1
        };

    var dataset = [];
    dataset.push(entranceDataset);

        var exitDataset = {
                label: 'OUT',
                type: 'bar',
                yAxesID : "y-axis-1",
                data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            };

        dataset.push(exitDataset);



    var lineDataset = {
        type: 'line',
        label: 'Total',
        yAxesID : "y-axis-2",
        backgroundColor: "rgba(255,255,255,0.5)",
        data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10],
        borderColor: 'rgba(255, 93, 0, 0.6)',
        borderWidth: 2
    }

    dataset.push(lineDataset);


    var ctx = $('#throughput-canvas');

    mainThroughputChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["13:30", "13:40", "13:50", "14:00", "14:10", "14:20", "14:30", "14:40", "14:50", "15:00", "15:10", "15:20"],
            datasets: dataset
        },
        options: {
            scales: {
                yAxes: [{
                    id:"y-axis-1",
                    position:'left',
                    type: 'linear',
                    ticks: {
                        beginAtZero:true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Throughput'
                      }
                    },
                      {
                    id:"y-axis-2",
                    position:'right',
                    type: 'linear',
                    /*ticks: {
                        beginAtZero:true
                    },*/
                    scaleLabel: {
                        display: true,
                        labelString: 'Attendance'
                      }
                }],
                xAxes : [{
                    gridLines : {
                        display : false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Time'
                      }
                }]
            },

        }
    });

Answer 1

可以在Github上找到答案。原来这是数据集对象属性中的拼写错误，应该是yAxisID。

https://jsfiddle.net/17mw40rx/1/

Chartjs - 两个Y轴刻度问题

1 个答案: