J'ai essayé ce qui suit pour afficher deux axes y sur un graphique linéaire. Cependant, les graphiques ne semblent pas apparaître une fois que j'ai mis en œuvre cela.

var options = {
                type: "line",
                data: {
                    labels: timelist,
                    datasets: [
                        {label: "Ambient Temp", data: temp_amb_data, backgroundColor: "rgba(75, 192, 192, 0.2)", borderWidth: 1, borderColor: "rgba(75, 192, 192, 1)",id='left-y-axis'},
                        {label: "Ambient Humidity", data:amb_hum_data, backgroundColor: "rgba(255, 99, 132, 0.2)", borderWidth: 1, borderColor: "rgba(255, 99, 132, 1)",id='right-y-axis'},
                        {label: "Booth Temp", data: temp_col, backgroundColor: "rgba(153, 102, 255, 0.2)", borderWidth: 1, borderColor: "rgba(153, 102, 255, 1)",id='left-y-axis'},
                        {label: "Booth Humidity", data: hum_data, backgroundColor: "rgba(255, 159, 64, 0.2)", borderWidth: 1, borderColor: "rgba(255, 159, 64, 1)",id='right-y-axis'}
                    ]
                },
                options: {
                    legend:{position:'right'},
                    animation: {tension: {duration: 1000, easing: "linear", from: 1, to: 0, loop: true}},
                    scales: {yAxes:[{ id:'left-y-axis',type='linear',position:'left'},{id:'right-y-axis',type='linear',position:'right'}]}
                }
            };

            var ctx = document.getElementById("myChart").getContext("2d");
            var chart = new Chart(ctx, options);

Où vais-je mal?

0
coder_bg 15 sept. 2020 à 21:22

1 réponse

Meilleure réponse

Les problèmes que je vois sur votre extrait sont :

  1. Il vous manque quelques paramètres sur votre configuration Chart.js.
  2. Le JSON fourni n'est pas valide.
  3. De plus, il n'est pas facile de reproduire l'erreur. Essayez de fournir un exemple Codepen.

J'ai créé cet extrait Codepen avec un graphique et deux axes Y : https://codepen.io/adelriosantiago/ stylo/wvGxeGB

Voir le deuxième axe Y à l'intérieur de options.scales.yAxes. Pouvez-vous l'essayer avec vos données dataset et voir si cela correspond à vos besoins ? Si ce n'est pas le cas, veuillez forker le Codepen et fournir le lien.

Dans le deuxième CodePen que vous avez fourni, le seul problème trouvé est la configuration Chart.JS non valide. Plus précisément la clé yAxisId qui devrait être yAxisID. Petite mais importante différence. Le Codepen fixe est ici : https://codepen.io/adelriosantiago/pen/MWyqWdr ( J'ai ajouté une valeur négative sur le deuxième axe pour différencier facilement min et max)

0
adelriosantiago 16 sept. 2020 à 19:11