/ 11评 /

最近在公司做一些大数据统计的一些工作,展示数据需要用到图表,比如折线图、坐标图、柱状图。找了几个插件以后,发现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会自动给你绘制好,基本如下图,点击底部的项目,是可以在图表中隐藏/显示这个项目的。

tb_1

代码中的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); ?><!--?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); ?>]
        }]
    });

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

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

11条回应:“图表展示插件Highcharts”

  1. stan说道:

    饼图我觉得最丑了,项目一多简直没法看

  2. 钛客志说道:

    确实能显示出一些逼格

  3. 老张说道:

    我喜欢柱状图,表格

  4. 路人甲说道:

    看起来确实很简单的样子

  5. 企业咨询说道:

    说明苹果6的使用者最多咯

  6. 馋丫风独味说道:

    感谢分享,虽然我看不懂

发表评论

电子邮件地址不会被公开。 必填项已用*标注