Вторые значения yAxes не отображаются правильно с Chart.js - PullRequest
Новая
       18

Вторые значения yAxes не отображаются правильно с Chart.js

1 голос
/ 28 марта 2019

У меня есть один набор данных, который не отображается в диаграммах с двумя yAxes.

У меня есть общий код Chart.js, работающий с двумя наборами данных и двумя yAxes.однако один набор данных не отображается правильно на графике.значения «Temp» находятся в диапазоне от 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>

Может быть, я упускаю что-то специфическое для построения графиков с двумя осями ...

1 Ответ

2 голосов
/ 28 марта 2019

Произошла орфографическая ошибка, замените 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
    }]
...