【问题标题】:Chartjs - Two Y-axis scale problemsChartjs - 两个 Y 轴刻度问题
【发布时间】:2016-07-07 22:43:55
【问题描述】:

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

        }
    });

【问题讨论】:

    标签: javascript charts chart.js


    【解决方案1】:

    在 Github 上找到答案就OK了。原来这是 Dataset 对象属性中的拼写错误,应该是 yAxisID

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

    【讨论】:

      猜你喜欢
      • 2017-12-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-29
      • 2017-05-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多