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下载
有不足之处 欢迎指出 谢谢