Highcharts图表使用说明

Highcharts图表使用说明

1.简介

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

·        兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

·        对个人用户完全免费；

·        纯JS，无BS；

·        支持大部分的图表类型：柱状图，直线图，曲线图、区域图、区域曲线图、饼装图、散布图等；

·        跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

·        提示功能：鼠标移动到图表的某一点上有提示信息；

·        放大功能：选中图表部分放大，近距离观察图表；

·        易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

·        时间轴：可以精确到毫秒；

·        Ajax支持： 使用数组接受Ajax传值

2. Highcharts图表预览

2.1.柱状图

2.2.直线图

2.3.曲线图

2.4.饼状图

2.5.区域图

2.6.区域曲线图

2.7.散布图

2.8.堆状图

2.9.其他

3.Highcharts调用范例

基于.net版本

3.1.实际效果图

3.2.前台代码及部分代码说明

<%--必要基础库--%>
   <scriptsrc="../../js/jquery.min.js"type="text/javascript"></script>
   <%-- 图形化处理JS文件--%>
   <scriptsrc="../../js/Highcharts/highcharts.js"type="text/javascript"></script>
   <%-- 打印/联网下载图片等js文件--%> (详见附录3.4.)
   <%--<scriptsrc="../../js/Highcharts/exporting.js"type="text/javascript"></script>--%>
   <%-- 主题样式--%>
   <%--<script src="../../js/Highcharts/themes/grid.js"type="text/javascript"></script>--%>
   <%-- 页面调用方法--%>
   <scripttype="text/javascript">
         <script type="text/javascript">
            //chart值对象 json数据
            var chart_value= {chart: {
                    renderTo: 'container',          //放置图表的容器
                    defaultSeriesType: 'column',    
//图表类型line, spline, area, areaspline, column, bar, pie , scatter
                    //zoomType: 'x',                  //放大
                    inverted: false                  //左右显示，默认上下正向
                },
                //图标的标题
                title: {                            
                    text: 'XX百分比情况统计',         
                    style:{}                        //标题样式
                },
                //图标的副标题
                subtitle: {                         
                    text: '按XX统计'               
                },
                //X轴
                xAxis: {                            
                    categories: <%= xAxisCategories %>,//坐标值 
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {font: 'normal 13px 宋体'}
                    }
                },
                //Y轴
                yAxis: {
                    min: 0,
                    title: {text: '百分比'}
                     //Y轴坐标标题  labels:纵柱标尺
                },plotLines: [{
                //区分线或可根据项目 标出其基线 value//表示显示数值width//显示宽 px
                            value: 0,
                            width: 1,
                            color: '#808080',
                        }]
                    },
                //【图例】位置样式
                legend: {                  
                    layout: 'horizontal',
                       //【图例】显示的样式：水平（horizontal）/垂直（vertical）
                    backgroundColor: '#FFFFFF',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    align: 'center',
                    verticalAlign: 'top',//默认为底部
                    enabled:true,
                    //x: 100,
                    y: 50,
                    //floating: true,
                    shadow: true,
                     width : 650,
                     itemWidth: 210
                },
                //提示信息
                tooltip: {                        
                    formatter: function() {     //当鼠标悬置数据点时的格式化提示
                        return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1);
                    }
                },
                //划分选项
                plotOptions: { 
                    column: {
                        cursor: 'pointer',    //鼠标样式
                        pointPadding: 0.2,  //图表柱形的
                        borderWidth: 0    //图表柱形的粗细
                        },bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series:<%= returnValue %>};
        //主体调用方法
        var chart;
        $(document).ready(function() {
             chart = new Highcharts.Chart(chart_value);  
        });
        //点击按钮值的显示与否
        var flag = false;
                function show_click()
                {
                    if(flag == false)
                    {
                    chart_value.plotOptions={
                 column:{dataLabels: {enabled: true,
                              formatter: function() {return this.y +'小时';},
                              y:-15} } };
                    chart = newHighcharts.Chart(chart_value);
                    flag = true;
                    }
                    else {
                    chart_value.plotOptions={
                  column: {dataLabels: {enabled: false,
                              formatter: function() {return this.y +'小时';},
                              y:-15} } };
                    chart = newHighcharts.Chart(chart_value);
                    flag = false;
                    }
                }
    </script>
<div id="container" style="min-width: 800px; height: 500px; margin: 0 2em"></div>
<button id="button"οnclick="show_click()">Button</button>

3.3.后台代码

public string returnValue = "
[{name:'XX比率1',
data:[{y:74.33,value:194},{y:76.25,value:5045},{y:67.12,value:298}]},
{name:'XX比率2',
data:[{y:66.28,value:173},{y:78.84,value:5216},{y:67.57,value:300}]},
{name:'XX比率3',
data:[{y:88.12,value:230},{y:88.36,value:5846},{y:87.39,value:388}]},
{name:'XX比率4',
data:[{y:38.70,value:101},{y:34.08,value:2255},{y:28.38,value:126}]},
{name:'XX比率5',
data:[{y:16.48,value:43},{y:26.92,value:1781},{y:23.20,value:103}]},
{name:'XX比率6'
,data:[{y:37.93,value:99},{y:47.73,value:3158},{y:39.64,value:176}]}]";    
public string xAxisCategories = "[ 'XX制造业1', 'XX制造业2', 'XX制造业3']";

3.4概述exporting.js文件

3.2.里的exporting.js文件在项目中起 打印 图表转图片文件的作用

但由于部分功能链接官网去调用方法，所以在非联机的情况，且对图表没有打印功能要求，可以将其屏蔽

4.补充 

Highcharts 官网：http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

Highcharts 官网API文档：http://www.highcharts.com/ref/

----------------------------------------------------------------------------------------------------------------------------------------
有问题或疑问的 欢迎指出 讨论

觉得还可以的
在这也去下面地址 下载整理好的文档
文档 CSDN下载
有不足之处 欢迎指出 谢谢