开发记录——Highcharts应用

最近在靠山平台接手了一项股票APP开发的项目，作为使用最多的图表，对Highcharts使用做个记录。

Highcharts用来作为图表数据的展示十分方便，效果也比较好，不仅可以实现死数据的展示，也能实现动态数据的实时添加显示。

这是官方API文档地址：https://api.highcharts.com.cn/highcharts

在引用HighCharts后，可以通过Highcharts.chart('Id')方法将图表装载到相应的容器中。js部分的代码如下：

var chart = null;

var datas = []

//通过接口获取数据，然后遍历到datas中

$.post("/index.php",function(res){

    for(var s=0;s<res.length;s++){

        datas.push({

            x: res[s].date*1000,        //X轴所使用的为毫秒时间戳

            y: Number(res[s].price)

       });          

    }

    //创建图表

    chart = Highcharts.chart('container', {

        title: {

              text: '新图表标题'

        },

        xAxis: {

             type: 'datetime',

             //dateTimeLabelFormats设置X轴显示样式，这里使用的是day，其他样式参考API文档

             dateTimeLabelFormats: {

                    day: '%e',
             },
             tickPixelInterval: 50,

             maxZoom: 24 * 3600 * 1000

        },

        yAxis: {

            title: {

                text: null

            }

        },

        tooltip: {

             formatter: function () {

                  return '<b>' + this.series.name + '</b><br/>' +

                  Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +

                  Highcharts.numberFormat(this.y, 2);

             }

        },

        legend: {

             enabled: false

        },

        series: [{

             name: '实时数据',

             data: datas    //datas即获取遍历后的数据

        }]

    }); 

});