第二个yAxes值未使用Chart.js正确绘制图表

Question

我有一个数据集值没有在双yAxes图表中显示。

我有一般的Chart.js代码使用双数据集和双yAxes。但是，一个数据集未在图表上正确显示。 “Temp”值介于66和78之间，但尽管我使用了最小/最大范围值，但它似乎是“不在图表之外”。

See my code here on JSFiddle

<div style="width:75%">
     <canvas class=".content" id="myChart" ></canvas>
</div>


<Script>
var canvas = document.getElementById('myChart').getContext('2d');

// @ts-ignore
var myChart = new Chart(canvas, {
    options: {
        scales: {
            yAxes: [
                {
                id: 'SG',
                //type: 'linear',
                position: 'left',
                ticks: 
                    {
                    min: 1,
                    max: 1.1
                    }             
                }, 
                {
                id: 'Temp',
                //type: 'linear',
                position: 'right',
                ticks: 
                    {
                    min: 32,
                    max: 100
                    }
                }
            ]
        }
    },
    type: 'bar', //not really needed, over-ridden below
    data: {
        labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
        datasets: [{
            label: 'Gravity',
            yAxesID: 'SG',
            data: [1.07, 1.045, 1.030, 1.014, 1.012],
            backgroundColor: '#ff6384' //red
        }, {
            //type: 'line',
            label: 'Temp F',
            yAxesID: 'Temp',
            data: [78, 66, 78, 66, 76],
            backgroundColor: '#36a2eb' //blue
        }]
    }
});

</Script>

也许我错过了双yAxes图表特有的东西......

Answer 1

有一个拼写错误用yAxesID替换yAxisID，数据集群应该看起来像下面的代码，或者你可以看到小提琴供你参考 - > https://jsfiddle.net/69p7Lsth/1/

datasets: [{
      label: 'Gravity',
      yAxisID: 'SG',
      data: [1.07, 1.045, 1.030, 1.014, 1.012],
      backgroundColor: '#ff6384' //red
    }, {
      label: 'Temp F',
      yAxisID: 'Temp',
      data: [8, 66, 78, 66, 76],
      backgroundColor: '#36a2eb' //blue
    }]