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

我有一个数据集值未显示在double-yAxes图表中。


我有使用双重数据集和双重yAxes的通用Chart.js代码。但是,一个数据集未在图表上正确显示。“温度”值的范围在66到78之间,尽管我使用的是最小/最大范围值,但似乎“不在图表之列”。


在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图表的东西...


有只小跳蛙
浏览 448回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript