项目中关于highchart图表的一些总结

单个series:
Highcharts.chart('container1', {
        chart: {
            animation: false,
            type: 'spline',
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0],
                        chart = this;
                    setInterval(function () {
                        var x = (new Date()).getTime(), // 当前时间
                            y = Math.random() * (2 - (0)) + (0);//2和0分别对应随机数据的最大最小值
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            },
            zoomType: 'x',
            backgroundColor: "rgba(41,41,41,0.3)",
        },
        boost: {
            useGPUTranslations: true
        },
        title: {
            text: '10-min Mean Wind Speed 10分鐘平均風速',
            style: {
                color: "white"
            }
        },
        // subtitle: {
        //     text: 'Using the Boost module'
        // },
        yAxis: {
            gridLineDashStyle: 'Dash',
            title: {
                text: "Wind Speed 風速(m/s)",
                style: {
                    fontSize: '16px'
                }
            }
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H:%M'
            },
            gridLineDashStyle: 'Dash',
            gridLineWidth: 1,
            title: {
                text: "Time 時間",
                style: {
                    fontSize: '16px'
                }
            }
        },
        plotOptions: {
            series: {
                animation: false
            }
        },
        tooltip: {
            valueDecimals: 2
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        legend: {
            enabled: false,
        },
        series: [{
            color: 'red',
            data: (function () {
                // 生成随机值
                var data = [],
                    i;
                for (i = -500; i <= 0; i += 1) {
                    data.push({
                        x: (new Date()).getTime() + i * 9000,
                        y: Math.random() * (2.5 - (0)) + (0)
                    });
                }
                return data;
            }())
        }]
    });

多个series:

Highcharts.chart('container8', {
    chart: {
        plotBorderWidth: 1,
        plotBorderColor: 'white',
        zoomType: 'x',
        backgroundColor: "rgba(41,41,41,0.3)",
        type: 'spline',
        Animation: false,
        marginRight: 10,
        events: {
            load: function () {
                let series = this.series[0];
                let series1 = this.series[1];
                let series2 = this.series[2];
                let series3 = this.series[3];
                chart = this;
                setInterval(function () {
                    let x = (new Date()).getTime(), // 当前时间
                        y = Math.random() * (200 - (-200)) + (-200);
                    y1 = Math.random() * (200 - (-200)) + (-200);
                    y2 = Math.random() * (200 - (-200)) + (-200);
                    y3 = Math.random() * (200 - (-200)) + (-200);
                    series.addPoint([x, y], true, true);
                    series1.addPoint([x, y1], true, true);
                    series2.addPoint([x, y2], true, true);
                    series3.addPoint([x, y3], true, true);
                }, 1000);
            }
        }
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Transversal Displacement竪向位移',
        style: {
            color: "white"
        }
    },
    // subtitle: {
    //     text: 'Using the Boost module'
    // },
    yAxis: {
        gridLineDashStyle: 'Dash',
        title: {
            text: "Displacement 位移(mm)",
            style: {
                fontSize: '16px'
            }
        },
    },
    xAxis: {
        gridLineDashStyle: 'Dash',
        gridLineWidth: 1,
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%H:%M'
        },
        title: {
            text: "Time 時間",
            style: {
                fontSize: '16px'
            }
        },
    },
    tooltip: {
        valueDecimals: 2
    },
    legend: {
        enabled: true,
        floating: true,
        y: -130,
        align: "center"
    },
    series: [{
        name: "GPS1",
        color: "red",
        data: (function () {
            // 生成随机值
            let data = [],
                i;
            for (i = -100; i <= 0; i += 1) {
                data.push({
                    x: (new Date()).getTime() + i * 9000,
                    y: Math.random() * (200 - (-200)) + (-200)
                });
            }
            return data;
        }())
    },
        {
            name: "GPS2",
            color: "green",
            data: (function () {
                // 生成随机值
                let data1 = [],
                    i;
                for (i = -100; i <= 0; i += 1) {
                    data1.push({
                        x: (new Date()).getTime() + i * 9000,
                        y: Math.random() * (200 - (-200)) + (-200)
                    });
                }
                return data1;
            }())
        }, {
            name: "GPS3",
            color: "blue",
            data: (function () {
                // 生成随机值
                let data2 = [],
                    i;
                for (i = -100; i <= 0; i += 1) {
                    data2.push({
                        x: (new Date()).getTime() + i * 9000,
                        y: Math.random() * (200 - (-200)) + (-200)
                    });
                }
                return data2;
            }())
        }, {
            name: "GPS4",
            color: "pink",
            data: (function () {
                // 生成随机值
                let data3 = [],
                    i;
                for (i = -100; i <= 0; i += 1) {
                    data3.push({
                        x: (new Date()).getTime() + i * 9000,
                        y: Math.random() * (200 - (-200)) + (-200)
                    });
                }
                return data3;
            }())
        }]
});

//交互类型的

function formatDateTime(date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    h = h < 10 ? ('0' + h) : h;
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
//将标准时间转化为时间戳
function timeToTimestamp(time){
    let timestamp = Date.parse(new Date(time).toString());
    //timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
    console.log(time + "的时间戳为：" + timestamp);
    return timestamp;
    //2021-11-18 22:14:24的时间戳为：1637244864707
}


function getFormatDate_XLSX(serial) {
    var utc_days = Math.floor(serial - 25569);
    var utc_value = utc_days * 86400;
    var date_info = new Date(utc_value * 1000);
    var fractional_day = serial - Math.floor(serial) + 0.0000001;
    var total_seconds = Math.floor(86400 * fractional_day);
    var seconds = total_seconds % 60;
    total_seconds -= seconds;
    var hours = Math.floor(total_seconds / (60 * 60));
    var minutes = Math.floor(total_seconds / 60) % 60;
    var d = new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
    /*//得到Date()对象后，便可进行日期格式化了！
    var add0 = (m) => m < 10 ? '0' + m : m;
    var d = getFormatDate_XLSX(44358.9999884259);
    var YYYY = d.getFullYear();
    var MM = add0(d.getMonth() + 1);
    var DD = add0(d.getDate());
    var hh = add0(d.getHours());
    var mm = add0(d.getMinutes());
    var ss = add0(d.getSeconds());
    return `${YYYY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
    */

    return timeToTimestamp(formatDateTime(d));
}

$.ajax({
    type:"GET",
    url:'../../static/json/qx.json',
    success:function(data){
        //定义一个数组
        browsers = [],
            //迭代，把异步获取的数据放到数组中
            $.each(data,function(i,d){
                console.log(i)
                let a=[];let b=[];
                for (let j = 0; j < d.length ; j++) {
                    a[j]=getFormatDate_XLSX(d[j].RECORD_TIME);
                    // a[j]=a[j].substring(11,16);
                    b[j]=parseFloat(d[j].AIR_TEMPERATURE.toFixed(2));
                    browsers.push([a[j],b[j]]);
                    console.log( a[j])
                    console.log(typeof b[j])
                    // browsers.push([a[j].RECORD_TIME,d[j].AIR_TEMPERATURE])
                    // browsers.push([ getFormatDate_XLSX(d[j].RECORD_TIME),d[j].AIR_TEMPERATURE])

                }
                console.log(browsers)
                console.log(d)
            });
        //设置数据
        chart_1.series[0].setData(browsers);
    },
    error:function(e){
        alert(e);
    }
});
var chart_1= Highcharts.chart('container1', {
    chart: {
        plotBorderWidth: 1,
        plotBorderColor: 'white',
        zoomType: 'x',
        backgroundColor: "rgba(41,41,41,0.3)",
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Real Time Temperature實時溫度',
        style:{
            color:"white"
        }
    },
    // subtitle: {
    //     text: 'Using the Boost module'
    // },
    yAxis:{

        gridLineDashStyle:'Dash',
        title:{
            text:" Temperature 溫度(℃)",
            style: {
                fontSize:"16px"
            }
        },
    },
    xAxis: {
        type: 'datetime',
        labels:{
            formatter: function () {
                return Highcharts.dateFormat('%H:%M', this.value);
            },
        },
        // dateTimeLabelFormats: {
        //     day: '%H:%M'
        // },
        gridLineDashStyle:'Dash',
        gridLineWidth:1,
        title:{
            text:"Time 時間",
            style: {
                fontSize:"16px"
            }
        },
    },
    credits:{
        enabled:false
    },
    exporting:{
        enabled:false
    },
    tooltip: {
        valueDecimals: 2
    },
    legend: {
        enabled: false,
    },

    series: [{
        color:"red",
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 2000
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});