图表展示插件Highcharts

2016-12-08 15:45发布于代码

最近在公司做一些大数据统计的一些工作，展示数据需要用到图表，比如折线图、坐标图、柱状图。找了几个插件以后，发现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); ?>]
        }]
    });

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