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

Question

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

我得到了使用双数据集和双 y 轴的通用 Chart.js 代码。然而，一组数据没有在图表上正确显示。 "Temp" 值介于 66 和 78 之间，但尽管我使用 min/max 范围值，但似乎是 "off the chart"。

<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
    }]

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

Second yAxes values not charting correctly with Chart.js

javascript

jsfiddle

chart.js