Highcharts.js －纯javasctipt图表库初体验

一.highcharts简介以及引入

　　highcharts作为免费提供给个人学习、个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便。在我最近完成一个需求的时候用到了它，它的兼容性也很强，其在标准（W3C标准）浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。我们在使用highcharts的时候只需要引入highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个，在此我们使用jQuery。

只需在你的项目中如此引用就能方便的调用它的各种函数

<script src="./jquery-1.8.3.min.js"></script>

<script src="./highcharts.js"></script>

二.常用图表介绍

　　HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等,在此主要介绍一下饼图，柱状图以及线性图的属性和调用方法。

首先要确保如上的代码正确引用，新建一个index.html，加入以下代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script src="js/highcharts.js"></script>

 <script>

 var params ={

 };

$(function () {

    $('.pieChart').highcharts({

        chart: {

             plotBackgroundColor: null, //绘制图形区域的背景颜色

                plotBorderWidth: null, //边框颜色

                plotShadow: true, //绘图区投影

                width: params.width || 200, //

                height: params.height || 200, //

                margin: [0, 0, 0, 0],

                reflow: false,//自动缩放

                //animation:false

        },

        title: {

            text: '饼图'

        },

        tooltip: {

            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

        },

        credits: {//去掉图标

                enabled: false

            },

        plotOptions: {

           pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    size:params.size || 100,//pie size

                    dataLabels: {

                        enabled: true,

                        color: '#000000',

                        connectorColor: '#000000',

                        format: '<b>{point.name}</b>: <br>{point.percentage:.1f} %',

                        distance: -5

                    },

                }

        },

        series: [{

            type: 'pie',

            name: 'Browser share',

            data: [

                ['Firefox',   45.0],

                ['IE',       26.8],

                {

                    name: 'Chrome',

                    y: 12.8,

                    sliced: true,

                    selected: true

                },

                ['Safari',    8.5],

                ['Opera',     6.2],

                ['Others',   0.7]

            ]

        }]

    });

    $('#lineChart').highcharts({

            chart: {

                    type: 'spline',

                    width:200,//

                    height:200,//

                    animation: Highcharts.svg, // don't animate in old IE

                    marginRight: 10,

                    events: {

                        load: function() {                                              

                        }

                    }

                },

            credits: {

                enabled: false

            },

            plotOptions: {

                line: {

                    animation: false

                },

                series: {

                    animation: false

                }

            },

            title: {

                text: '线性图'

            },

            xAxis: {

                type: 'datetime',

                // dateTimeLabelFormats: { // don't display the dummy year

                //     second: '%H:%M:%S'

                },

            yAxis: {

                    title: {

                        text: '单位(Mbit/s)'

                    },

                    plotLines: [{

                        value: 0,

                        width: 1,

                        color: '#808080'

                    }] ,

                    min: 0,

                    allowDecimals:false

                },

            series: [{

                name:'网站流量',

                data:[ [ 1453443752602, 30.2 ], [ 1453443753602, 47.9 ], [ 1453443754602, 38.2 ], [ 1453443755602, 59.8 ], [ 1453443756602, 43.3 ], [ 1453443757602, 57.1 ], [ 1453443758602, 52.2 ], [ 1453443759602, 48 ] ]

            }]

        });

    $('.barChart').highcharts({

                chart: {

                    type: 'column',

                    height:200,

                    width:params.width || 250,

                },

                credits: {

                    enabled: false

                },

                legend:{

                    enabled: false

                },

                title: {

                    text: params.title

                },

                subtitle: {

                    text: ''

                },

                xAxis: {

                    categories:params.categoriesArr|| ['当前','周','月']

                },

                yAxis: {

                    min: 0,

                    title: {

                        text: params.yUnit ||'(个)'

                    }

                },

                tooltip: {

                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

                        '<td style="padding:0"><b>{point.y:.1f} '+'（个）'+'</b></td></tr>',

                    footerFormat: '</table>',

                    shared: true,

                    useHTML: true

                },

                plotOptions: {

                    column: {

                        pointPadding: 0.2,

                        borderWidth: 0,

                        pointWidth:params.pointWidth||30 //宽度

                    }

                },

                series: params.series||

                [{

                     name: ['数量'],

                    data: [213,321,112]

                    }

                ]

            });

});

</script>

</head>

<body>

    <div class="pieChart"></div>

    <div id="lineChart"></div>

    <div class="barChart"></div>

</body>

</html>

运行就可以看到常用的饼图，条形图柱状图已经顺利生成了。

我们可以看到在highchart中，是利用jquery选择器去选择相应的元素进行绘图，所以我们可以灵活的使用id，class等选择器为我们绑定图表。

三.常用属性介绍

成功了运行上面的图表生成代码，那么下面我来为大家介绍一下其中常用的属性，以满足一般开发要求。

1.chart 顾名思义图表属性，通过改变它去改变图表的样式等

type: 'spline', //图表类型

plotBackgroundColor: null, //绘制图形区域的背景颜色

plotBorderWidth: null, //边框颜色

plotShadow: true, //绘图区投影

width: params.width || 200, //整个绘图区域宽度

height: params.height || 200, //这个绘图去高度

margin: [0, 0, 0, 0],//绘图区域margin

reflow: false,//自动缩放

events: //图表事件监听器

2.title

text: params.title// title的文字信息

3.credits

enabled: false// 不展示logo

4.plotOptions 对应的图形样式设定

pie: {//饼图

allowPointSelect: true,

cursor: 'pointer',

size:params.size || 100,//饼图中，饼图自身半径

dataLabels: {

enabled: true,

color: '#000000',

connectorColor: '#000000',

format: '<b>{point.name}</b>: <br>{point.percentage:.1f} %',

distance: -5  //用于设置饼图上描述文字的位置

},

}

plotOptions: {// 折线图

line: {

animation: false

},

series: {

animation: false

}

},

plotOptions: {//柱形图

column: {

pointPadding: 0.2,

borderWidth: 0,

pointWidth:params.pointWidth||30 //宽度

}

}

5.series 图表数据，注意尽量用number类型而不是string，因为除了饼图外，string值不被识别

四.参考

highcharts