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下載下傳
有不足之處 歡迎指出 謝謝