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.柱状图 
Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.2.直线图 
Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.3.曲线图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.4.饼状图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.5.区域图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.6.区域曲线图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.7.散布图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.8.堆状图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
2.9.其他 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
3.Highcharts调用范例
基于.net版本
3.1.实际效果图 Highcharts图表使用说明1.简介2. Highcharts图表预览3.Highcharts调用范例4.补充
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下载
有不足之处 欢迎指出 谢谢