Highcharts，Web前段图表插件的简单使用

HIGHCHARTS 简介：

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

Highcharts 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能，因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。

图表类型 

line：直线图 

spline：曲线图 

area：面积图 

areaspline：曲线面积图 

arearange：面积范围图 

areasplinerange：曲线面积范围图 

column：柱状图 

columnrange：柱状范围图 

bar：条形图 

pie：饼图 

scatter：散点图 

boxplot：箱线图 

bubble：气泡图 

errorbar：误差线图 

funnel：漏斗图 

gauge：仪表图 

waterfall：瀑布图 

polar：雷达图 

pyramid：金字塔

页面引入JS即可<script src="<%=basePath%>highcharts/highcharts.js"></script>

页面元素<div id="container" style="width:48%;height:48%;float:left;"></div>

     <div id="container1" style="width:48%;height:48%;float:left;"></div>

     <div id="container2" style="width:48%;height:48%;float:left;"></div>

页面JS方法

function setChart(type){

highcharts("container",type,'日志分类统计',jsonobj.names,jsonobj.vals,"日志数","条");

highcharts("container1",type,'近三十日（日日志统计）',jsonobj.names1,jsonobj.vals1,"日志数","条");

highcharts("container2",type,'近十二月（月日志统计）',jsonobj.names2,jsonobj.vals2,"日志数","条");

}

function highcharts(id,type,title,categories,data,ytitle,ext){

$('#'+id).highcharts({

       chart: {

           type: type

       },

       title: {

           text: title

       },

       subtitle: {

           text: ''

       },

       xAxis: {

           categories:categories,

           crosshair: true

       },

       yAxis: {

           min: 0,

           title: {

               text: ytitle

           }

       },

       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:f} '+ext+'</b></td></tr>',

           footerFormat: '</table>',

           shared: true,

           useHTML: true

       },

       plotOptions: {

           column: {

               pointPadding: 0.2,

               borderWidth: 0

           }

       },

       series: [{

           name: ytitle,

           data: data

       }]

   });

}

切换图表 <SELECT id="chart" onchange="setChart(this.value)" style="float:right;margin-right:10px">

<option value="column">条形统计图</option>

<option value="spline">折线统计图</option>

<option value="area">面积图</option>

</SELECT>