Chartjs - 两个 Y 轴刻度问题

Chartjs - Two Y-axis scale problems

本文关键字:问题 两个 Chartjs      更新时间:2023-09-26

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

没关系,在Github上找到了答案。 事实证明,这是数据集对象属性中的拼写错误,应该yAxisID

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