如何在chart.js中获取多个y轴？

coder_bg

我尝试以下在一个折线图上显示两个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);

我要去哪里错了？

阿德里奥圣地亚哥

我在您的代码段中看到的问题是：

您缺少Chart.js配置上的一些设置。
提供的JSON无效。
此外，重现该错误并不容易。尝试提供一个Codepen示例。

我创建了具有图表和两个Y轴的Codepen代码段：https ://codepen.io/adelriosantiago/pen/wvGxeGB

参见内部的第二个Y轴options.scales.yAxes。您可以将其与dataset数据一起尝试，看看是否满足您的需求？如果不行，请分叉Codepen并提供链接。

在您提供的第二个CodePen中，发现的唯一问题是无效的Chart.JS配置。具体yAxisId应该是哪个键yAxisID。小而重要的区别。固定的Codepen在这里：https ://codepen.io/adelriosantiago/pen/MWyqWdr （我在第二个轴上添加了一个负值，以便于区分min和max）