HighStock使用记录

1，需要在页面头部先导入相关JS，切记：需要先导入jQuery.main.js，然后导入Highstock.js才能正确的使用，因为Highstock是基于jQuery的。

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=path%>/js/highstock.js"></script>
<script type="text/javascript"  src="<%=path%>/js/highcharts-js/modules/exporting.js"></script>

2，进行全局设置

Highcharts.setOptions({
    global: {
        useUTC: false,//关闭UTC显示时间格式
    },
    lang: {

        shortMonths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],//月份缩写
        weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],//周缩写
        //导航条选择器设置文字
        rangeSelectorTo: "至",
        rangeSelectorFrom: "从",
        rangeSelectorZoom: "选择范围",
        resetZoom: "重置",
        // noData: "暂无数据",
        // fontsize:14,

    }

});

3，进行初始化设置图表：

   1）、图表类型：

//图表类型
chart: {
    zoomType: "xy",
    type: "spline",
    animation: Highcharts.svg,
    marginRight: 10,

},

   2）、版权信息是否显示：默认为true

//版权信息
credits: {
    enabled: false
},

   3）、数据导航：navigator

//数据导航
navigator: {
    adaptToUpdatedData: true,
    xAxis: {
        labels: {
            format: '{value:%Y-%m-%d}',
        },
    },
},

 4）、导航按钮设置：rangeselector

//选择器快捷按钮
rangeSelector: {
    buttons: [{
        type: 'day',
        count: 1,
        text: '1天',
    }, {
        type: 'day',
        count: 3,
        text: '3天'
    }, {
        type: 'week',
        count: 1,
        text: '7天'
    }, {
        type: 'month',
        count: 1,
        text: '1月'
    }, {
        type: 'all',
        text: '所有'
    }],
    selected: 1,
},

   5）、pointOptions：数据列配置

//             数据列配置是针对所有数据列及某种数据列有效的通用配置。
//              数据列的配置有三个级别：
//                  配置在 plotOptions.series，针对所有图表类型有效
//                  配置在 plotOptions.<数据列类型>，针对某种数据列有效
//                  配置在 series，针对某个数据列有效
            pointOptions: {
                series: {
                    showInLegend: true,
                    turboThreshold:dataLength,
                },
            },

  6）、legend：显示图表

//获取一个实例图表
legend: {
    enabled: true//控制图例的显示，默认为true
},
//显示图表标题
title: {
    text: "藻类历史数据"
},

  7）、XY轴属性设置：

//X轴属性设置
xAxis: {
    type: 'datetime',

    dateTimeLabelFormats: {
        second: '%m-%d<br/>%H:%M:%S',
        minute: '%m-%d<br/>%H:%M',
        hour: '%m-%d<br/>%H:%M',
        day: '%Y<br/>%m-%d',
        week: '%Y<br/>%m-%d',
        month: '%Y-%m',
        year: '%Y'
    }
},
//Y轴属性的设置
yAxis: {
    opposite: false,
    title: {
        text: "单位：浓度（%）",
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }],
},

  8）、导出功能是否开启

//开启导出
exporting: {
    enable: true,  //false为关闭
},

 9)、数据提示：

tooltip: {
    shared: true, //是否共享提示，也就是X一样的所有点都显示出来
    xDateFormat: '%Y-%m-%d %H:%M:%S',
    useHTML: true, //是否使用HTML编辑提示信息
    headerFormat: '<small>{point.key}</small><table>',
    pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>'
    + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2
    //数据值保留小数位数
},

  10）、数据

//数据
series: [{
    name: "蓝藻",
    //turboThreshold:dataLength,
    data: (function () {
        var data = [], i;
        //如使用动态长度请确保此处的长度值不可越界,否则会导致X轴时间出现错误，开始时间从1970年
        for (i = 0; i < dataLength; i++) {
            data.push({
                x: dataTimes[i],
                y: parseFloat(bluealgae[i]),
            });
            //console.log(data[i]); 此为在浏览器控制台输出
        }

        return data;
    })(),
    visible: true,
    // pointStart: Date.UTC(2018, 3, 1),
    pointInterval: 3 * 1000,

}]

说明：dataLength在上面JS中已经定义并根据后台获取数据的长度赋值，所以数据长度为动态

4，HighStock还有很多的属性，请参考API文档，在线地址：https://api.hcharts.cn/highstock