highchart图表设置加载页面

当我们采用异步请求加载数据较大加载速度较慢时，我们可以给highchart图表设置loading页面。

var chart_1= Highcharts.chart('container1', {
    chart: {
        plotBorderWidth: 1,
        plotBorderColor: 'white',
        zoomType: 'x',
        backgroundColor: "rgba(41,41,41,0.3)",
        spacingBottom:0,
        spacingTop:0,
        spacingLeft:0,
    },
    //图表未加载的加载动画
    loading: {
        style: {
            position: 'absolute',
            opacity: 0.3,//透明度
            textAlign: 'center',//文字显示方式
            //backgroundColor: 'gray',//背景色
            backgroundImage: 'url("../../imgs/icon/load.gif")',//显示的背景动态gif图片，设置此项为gif图片即可实现常见的加载中动态效果图
            backgroundSize: '100% 100%'//设置背景图片铺满Series数据列区域
        }
    },
    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'
                }
            }
        }]
    }
});
//在ajax数据未加载完成之前显示我们设置的loading页面
chart_1.showLoading();
$.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);
        //数据加载完毕关闭loading页面
        chart_1.hideLoading();
    },
    error:function(e){
        alert(e);
    }
});