如何适应ChartJS或HighCharts中的温度和湿度样式？

我已经设法获得了温度和湿度数据之间的参考，但是温度列显示在左侧，没有分开，即一个在左侧，另一个在右侧

代码如下：

我想要实现的是有一个类似的设计，我怎么能有一个类似的设计，比如每小时、每30秒获取数据，以便更精确地记录我基于同一个月、日期的每个记录，因为我有来自记录温度和湿度数据的不同传感器的信息

到目前为止，我有以下内容，但我仍然需要结合，绘制湿度数据。而且，除了显示每月的数据外，我还需要它向我显示它拥有的每个记录的信息，正如我在数据库中提到的，温度和湿度传感器记录的数据

var范围=[
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8],
[1247270400000, 10.7, 23.7],
[1247356800000, 11.0, 23.3],
[1247443200000, 11.6, 23.7],
[1247529600000, 11.8, 20.7],
[1247616000000, 12.6, 22.4],
[1247702400000, 13.6, 19.6],
[1247788800000, 11.4, 22.6],
[1247875200000, 13.2, 25.0],
[1247961600000, 14.2, 21.6],
[1248048000000, 13.1, 17.1],
[1248134400000, 12.2, 15.5],
[1248220800000, 12.0, 20.8],
[1248307200000, 12.0, 17.1],
[1248393600000, 12.7, 18.3],
[1248480000000, 12.4, 19.4],
[1248566400000, 12.6, 19.9],
[1248652800000, 11.9, 20.2],
[1248739200000, 11.0, 19.3],
[1248825600000, 10.8, 17.8],
[1248912000000, 11.8, 18.5],
[1248998400000, 10.8, 16.1]
],
平均数=[
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23],
[1246665600000, 23.8],
[1246752000000, 21.4],
[1246838400000, 21.3],
[1246924800000, 18.3],
[1247011200000, 15.4],
[1247097600000, 16.4],
[1247184000000, 17.7],
[1247270400000, 17.5],
[1247356800000, 17.6],
[1247443200000, 17.7],
[1247529600000, 16.8],
[1247616000000, 17.7],
[1247702400000, 16.3],
[1247788800000, 17.8],
[1247875200000, 18.1],
[1247961600000, 17.2],
[1248048000000, 14.4],
[1248134400000, 13.7],
[1248220800000, 15.7],
[1248307200000, 14.6],
[1248393600000, 15.3],
[1248480000000, 15.3],
[1248566400000, 15.8],
[1248652800000, 15.2],
[1248739200000, 14.8],
[1248825600000, 14.4],
[1248912000000, 15],
[1248998400000, 13.6]
];
Highcharts.chart（'容器'{
标题：{
文字：“七月温度”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：空
}
},
工具提示：{
十字准星：没错，
分享：是的，
valueSuffix:“°C”
},
图例：{
},
系列：[{
名称：“温度”，
数据：平均数，
zIndex:1，
标记：{
fillColor:'白色'，
线宽：2，
lineColor:Highcharts.getOptions（）.Color[0]
}
}, {
名称：'范围'，
数据：范围，
类型：'arearange'，
线宽：0，
链接到：'：上一个'，
颜色：Highcharts.getOptions（）.color[0]，
填充不透明度：0.3，
zIndex:0，
标记：{
已启用：false
}
}]
});
这可能是一个很好的开始


var范围=[[1246406400000,14.3,27.7]，[1246492800000,14.5,27.8]，[1246579200000,15.5,29.6]，[1246665600000,16.7,30.7]，[124675200000,16.5,25.0]，[1246838400000,17.8,25.7]，[1246924800000,13.5,24.8]，[1247011200000,10.5,21.4]，[1247097600000,9.2,23.8]，[1247184000000,11.6,124707270000]，[1247124007,23.7]，[1247356800000, 11.0, 23.3],[1247443200000, 11.6, 23.7],[1247529600000, 11.8, 20.7],[1247616000000, 12.6, 22.4],[1247702400000, 13.6, 19.6],[1247788800000, 11.4, 22.6],[1247875200000, 13.2, 25.0],[1247961600000, 14.2, 21.6],[1248048000000, 13.1, 17.1],[1248134400000, 12.2, 15.5],[1248220800000, 12.0, 20.8],[1248307200000, 12.0, 17.1],[1248393600000, 12.7, 18.3],[1248480000000, 12.4, 19.4],[1248566400000, 12.6, 19.9],[1248652800000, 11.9, 20.2],[1248739200000, 11.0, 19.3],[1248825600000, 10.8, 17.8],[1248912000000, 11.8, 18.5],[1248998400000, 10.8, 16.1]
];
const formattedData=ranges.reduce（（acc，e）=>（acc.x.push（e[0]），acc.y.push（e[1]），acc.y1.push（e[2]），acc），{x:[]，y:[]，y1:[]）；
调试器；
const minDate=Math.min（…formattedData.x），maxDate=Math.max（…formattedData.x）；
//const hours=Math.ceil（（maxDate-minDate）/（1000*60*60*24））；
const date=时刻（minDate）.startOf（'hour'）；
常数数据={
标签：新数组（6）.fill（“”）.map（（）=>date.add（1，'hour'）。格式（'HH:mm'）），
数据集：[{
标签：“温度”，
yAxisID:'y'，
背景颜色：“红色”，
边框颜色：“红色”，
数据：formattedData.y
}, {
标签：“湿度”，
yAxisID:'y1'，
背景颜色：“蓝色”，
边框颜色：“蓝色”，
数据：formattedData.y1
}]
};
常量配置={
键入：“行”，
数据：数据，
选项：{
回答：是的，
互动：{
模式：“索引”，
交集：错，
},
错,，
插件：{
标题：{
显示：对，
文本：“Chart.js折线图-多轴”
}
},
比例：{
y:{
类型：'线性'，
位置：'左'，
滴答声：{
回调：（值、索引、值）=>value.toFixed（1）+'C'
},
标题：{
显示：对，
文字：“湿度”
},
},
y1：{
类型：'线性'，
位置：'右'，
标题：{
显示：对，
文字：“温度”
},
钛