Highcharts是一個制作圖表的純Javascript類庫,主要特性如下:
- 相容性:相容當今所有的浏覽器,包括iPhone、IE和火狐等等;
- 對個人使用者完全免費;
- 純JS,無BS;
- 支援大部分的圖表類型:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖;
- 跨語言:不管是PHP、Asp.net還是Java都可以使用,它隻需要三個檔案:一個是Highcharts的核心檔案highcharts.js,還有a canvas emulator for IE和Jquery類庫或者MooTools類庫;
- 提示功能:滑鼠移動到圖表的某一點上有提示資訊;
- 放大功能:選中圖表部分放大,近距離觀察圖表;
- 易用性:無需要特殊的開發技能,隻需要設定一下選項就可以制作适合自己的圖表;
- 時間軸:可以精确到毫秒
下載下傳插件
Highcharts下載下傳位址
http://www.highcharts.com/download
jquery下載下傳位址
http://jquery.com/
1、需要引入的腳本
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>
2、前端顯示片段
$('#canvasDiv').highcharts({
chart: {
type: '@Model[0].Type'
},
title: {
text: '@Model[0].Title'
},
subtitle: {
text: '@Model[0].Subtitle'
},
xAxis: {
categories: @Html.Raw(Model[0].XAxis.CategoriesJson)
},
yAxis: {
title: {
text: '@Model[0].YAxis.Title'
},
labels: {
formatter: function () {
return this.value + '次'
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: @Html.Raw(Model[0].SeriesJson)
});
3、控制器資料綁定片段
示範效果如下:
實作代碼已全部開源
github:
https://github.com/cheng5x/YcHighCharts
oschina.net:
http://git.oschina.net/cheng5x/YcHighCharts
----------------------------
用心做産品
name:5+x
----------------------------