HightCharts双y轴+x时间轴

最新推荐文章于 2022-02-24 12:34:35 发布

zuofengnihao

最新推荐文章于 2022-02-24 12:34:35 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/zuofengnihao/article/details/79928833

版权

本文介绍了如何使用HightCharts展示基于时间的数据，特别是处理具有不同单位（如温度和湿度）的双纵轴图表。内容包括设置X轴为日期属性，格式化X轴和tooltip的时间显示，定义所需的JSON数据结构，以及指定数据对应Y轴的方法。

摘要由CSDN通过智能技术生成

公司布置完成图表使用HightCharts显示根据时间显示探头点数据由于探头分为两种数据属性一种是温度（单位℃）一种是湿度（单位%）所以需要使用双纵轴显示加上横轴使用date属性需要对date进行formart 上代码：

$('#myContainer').highcharts({
        chart: {
            zoomType: 'xy',
            type: 'spline'
        },
        title: {
            text: null
        },
        xAxis: [{
            crosshair: true,
            type: 'datetime',
            title: {
                text: null
            },
            dateTimeLabelFormats: {
                second: '%Y-%m-%d<br/>%H:%M:%S',
                minute: '%Y-%m-%d<br/>%H:%M',
                hour: '%Y-%m-%d<br/>%H:%M',
                day: '%Y<br/>%m-%d',
                week