HightCharts双y轴+x时间轴

公司布置完成图表 使用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: '%Y<br/>%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '温度',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '湿度',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true,
            dateTimeLabelFormats: {
                second: '<strong>%Y-%m-%d %H:%M:%S</strong>',
                minute: '<strong>%Y-%m-%d %H:%M</strong>',
                hour: '<strong>%Y-%m-%d %H:%M</strong>',
                day: '<strong>%Y %m-%d</strong>',
                week: '<strong>%Y %m-%d</strong>>',
                month: '<strong>%Y-%m</strong>',
                year: '<strong>%Y</strong>'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        series: data
    });
});

效果图：

总结：

1.x轴date属性加上

 xAxis: [{
            crosshair: true,
            type: 'datetime',

2.x轴显示数据格式化

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: '%Y<br/>%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }

3.tooltip面板时间格式化

tooltip: {
    shared: true,
    dateTimeLabelFormats: {
        second: '<strong>%Y-%m-%d %H:%M:%S</strong>',
        minute: '<strong>%Y-%m-%d %H:%M</strong>',
        hour: '<strong>%Y-%m-%d %H:%M</strong>',
        day: '<strong>%Y %m-%d</strong>',
        week: '<strong>%Y %m-%d</strong>>',
        month: '<strong>%Y-%m</strong>',
        year: '<strong>%Y</strong>'
    }
},

4.需要的json数据类型

这是官网实例结构

就是以 [毫秒值，value] 的数组形式封装。

最后需要解决 data对应以哪条轴为基准 需要给serie对象添加 yAxis 属性

值为第几条y轴 下标0 开始