chart.js：yAxis之一在混合图表中无法正确缩放

Question

有人可以告诉我为什么条形图数据无法在左侧的yAxis上正确缩放吗？

我花了很长时间才使两个yAxis都显示出来，而当我最终这样做时，条形图的yAxis陷入了麻烦。

<pre>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<script>
    Chart.defaults.global.elements.rectangle.borderColor = 'rgba(0, 29, 92, 1)';
    Chart.defaults.global.elements.rectangle.backgroundColor = 'rgba(200, 218, 232, 1)';

    Chart.defaults.global.elements.rectangle.borderWidth = '1';
    Chart.defaults.global.elements.rectangle.borderSkipped = 'bottom';
    //Chart.defaults.global.defaultFontColor = '#666';
    Chart.defaults.global.defaultFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
    Chart.defaults.global.defaultFontSize = 12
    Chart.defaults.global.defaultFontStyle = 'normal';

    var chartData = {
        labels: ['2017-08-01', '2017-08-02', '2017-08-03', '2017-08-04', '2017-08-05', '2017-08-06', '2017-08-07', '2017-08-08', '2017-08-09', '2017-08-10', '2017-08-11', '2017-08-12', '2017-08-13', '2017-08-14', '2017-08-15', '2017-08-16', '2017-08-17', '2017-08-18', '2017-08-19', '2017-08-20', '2017-08-21', '2017-08-22', '2017-08-23', '2017-08-24', '2017-08-25', '2017-08-26', '2017-08-27', '2017-08-28', '2017-08-29', '2017-08-30', '2017-08-31'],
        datasets: [{
            type: 'line',
            label: 'High Temps',
            id: "line-axis",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "yellow",
            borderColor: "red", // The main line color
            borderCapStyle: 'square',
            borderDash: [], // try [5, 15] for instance
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "black",
            pointBackgroundColor: "yellow",
            pointBorderWidth: 1,
            pointHoverRadius: 8,
            pointHoverBackgroundColor: "yellow",
            pointHoverBorderColor: "black",
            pointHoverBorderWidth: 2,
            pointRadius: 4,
            pointHitRadius: 10,
            data: [75, 77, 77, 80, 88, 85, 80, 90, 92, 97, 90, 98, 95, 90, 97, 93, 95, 85, 90, 92, 90, 95, 97, 99, 99, 96, 94, 94, 90, 92, 92]
        },
        {
            type: 'line',
            label: 'Low Temps',
            fill: false,
            lineTension: 0.1,
            backgroundColor: "white",
            borderColor: "blue", // The main line color
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "blue",
            pointBackgroundColor: "white",
            pointBorderWidth: 1,
            pointHoverRadius: 8,
            pointHoverBackgroundColor: "white",
            pointHoverBorderColor: "blue",
            pointHoverBorderWidth: 2,
            pointRadius: 4,
            pointHitRadius: 10,
            data: [65, 66, 66, 60, 62, 58, 60, 65, 68, 69, 70, 68, 65, 60, 67, 63, 65, 60, 60, 62, 65, 68, 61, 65, 65, 67, 64, 64, 60, 62, 62],
            borderWidth: 2
        },
        {
            type: 'bar',
            label: 'Kilowatt Hours',
            id: 'bar-axis',
            type: 'linear',
            backgroundColor: 'rgba(200, 218, 232, 1)',
            borderColor: 'rgba(0, 29, 92, 1)',
            data: [75, 70, 77, 80, 88, 85, 80, 77, 70, 77, 80, 88, 85, 70, 77, 80, 88, 85, 70, 77, 80, 88, 85, 70, 77, 80, 88, 85, 70, 77, 80]
        }]

    };


    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myMixedChart = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
                responsive: true,
                scales: {
                        yAxes: [{
                            position: "right",
                            id: "line-axis",
                            scaleLabel: {
                                labelString: "Temperature",
                                display: "true"
                            }

                        },
                        {
                            position: "left",
                            id: "bar-axis",
                            scaleLabel: {
                                labelString: "Kilowatt Hours",
                                display: "true"
                            },
                            ticks: {
                                beginAtZero: true,
                            }

                        }]
                },
                title: {
                    display: true,
                    text: 'Kilowatt Hours Delivered'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true
                }
            }
        });
    };
    $(document).ready(
    function () {

        $("#canvas").click(
            function (evt) {
                var activePoints = myMixedChart.getElementsAtEvent(evt)
                if (activePoints.length > 0)  // prevents error with clicking somewhere in the chart other than on a data segment
                {
                    var firstPoint = activePoints[0];
                    var label = myMixedChart.data.labels[firstPoint._index];
                    var value = myMixedChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
                    var url = "http://example.com/?label=" + label + "&value=" + value;
                    alert(url);
                }
            }
        );
    }
);
</script>
</pre>