Highcharts圖表.net版開源,支持webform 和 mvc3,完全開源


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM