最近在公司做一些大数据统计的一些工作,展示数据需要用到图表,比如折线图、坐标图、柱状图。找了几个插件以后,发现Highcharts特别简单,显示UI优雅,逼格高,而且据说是支持IE6+和移动端的。阿里云的数据展示似乎也用的这个插件。果断记录一下,直接上代码!

加载js:

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./highcharts.js"></script>

创建显示区域:

<div id="container" style="height: 400px; margin: 0 auto"></div>

前方高能,主要的js部分代码如下:

$(function () {
    $('#container').highcharts({
        title: {
            text: '',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: [01,02,03,04,05,06,07]
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '人'
        },
        series: [{
            name: '新增用户',
            data: [0,0,0,0,2608,1765,493]
        }, {
            name: '总活跃用户',
            data: [0,0,0,0,4120,5236,4056]
        }]
    });
}
);

这样就会在创建的div#container中绘制出图表,至于颜色、图表xy轴的最大宽高都不是你要考虑的事情,Highcharts会自动给你绘制好,基本如下图,点击底部的项目,是可以在图表中隐藏/显示这个项目的。

代码中的categories后面的值

[01,02,03,04,05,06,07]

实际上就是x轴的项目,我目前写的是日期,当然json可以改成['周一','周二','周三'....]也是可以的。 valueSuffix是每个值的单位,series中就是数据源。比如categories的日期有7个成员,这里的每一个数据源也应该有7个值,在js里按照如图的格式写上就行了。 实际开发中,数据源的值应该是动态显示的,不会直接写死在js的代码中,比如php中,

$data = array(1,2,3,4,5,6,7);

在上面的js中,可以这么写

series: [{
            name: '新增用户',
            data: [<?php echo implode(',', $data); ?>]
        }]

这样,html代码执行的时候,js读取到的数据,就是[1,2,3,4,5,6,7], 当然后端代码也可以这么写:

series: [{
            name: '新增用户',
            data: <?php echo json_encode($data); ?>
        }]

饼图的效果是这样,加载的js和html创建的div不用修改,直接修改js:

$('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'iOS系统版本占比'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '使用率',
            data: [<?php echo implode(',',$sysVersion); ?>]
        }]
    });

这样就出来了如下的饼图~~

Highcharts还支持柱状图、散点图、3D图等各种闻所未闻的图,还可以根据ajax加载数据,反正我懒得贴代码了,直接去中文网可以看demo并且获取代码:传送门