如何在chart.js中獲得多個y軸？

Question

我嘗試了以下方法在一個折線圖上顯示兩個 y 軸。 但是，一旦我實現了這個，圖表似乎就不會出現。

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);

我哪里錯了？

Answer 1

我在您的代碼段中看到的問題是：

1. 您在 Chart.js 配置中缺少一些設置。
2. 提供的 JSON 無效。
3. 此外，重現錯誤並不容易。 嘗試提供一個 Codepen 示例。

我用圖表和兩個 Y 軸創建了這個 Codepen 片段： https ://codepen.io/adelriosantiago/pen/wvGxeGB

查看options.scales.yAxes的第二個 Y 軸。 你能用你的dataset數據試試看它是否符合你的需求嗎？ 如果沒有，請 fork Codepen 並提供鏈接。

在您提供的第二個 CodePen 中，發現的唯一問題是無效的 Chart.JS 配置。 特別是鍵yAxisId應該是yAxisID 。 小而重要的區別。 固定的 Codepen 在這里： https ://codepen.io/adelriosantiago/pen/MWyqWdr（我在第二個軸上添加了一個負值以輕松區分min和max ）