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

Question

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

我有使用双数据集和双 yAxes 的通用 Chart.js 代码。然而，一组数据没有在图表上正确显示。 “温度”值介于 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>

也许我遗漏了一些特定于双 y 轴图表的东西......

Answer 1

将 yAxesID 替换为 yAxisID 存在拼写错误，数据集填充应类似于以下代码，或者您可以查看 fiddle 以供引用 -> 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
    }]