Highcharts圖表.net版開源，支持webform 和 mvc3，徹底開源

時間 2019-11-09

標籤 highcharts 圖表開源支持 webform mvc3 mvc 徹底简体版

原文原文鏈接

Highcharts是一個製做圖表的純Javascript類庫，主要特性以下：javascript

兼容性：兼容當今全部的瀏覽器，包括iPhone、IE和火狐等等；
對我的用戶徹底免費；
純JS，無BS；
支持大部分的圖表類型：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖；
跨語言：無論是PHP、Asp.net仍是Java均可以使用，它只須要三個文件：一個是Highcharts的核心文件highcharts.js，還有a canvas emulator for IE和Jquery類庫或者MooTools類庫；
提示功能：鼠標移動到圖表的某一點上有提示信息；
放大功能：選中圖表部分放大，近距離觀察圖表；
易用性：無須要特殊的開發技能，只須要設置一下選項就能夠製做適合本身的圖表；
時間軸：能夠精確到毫秒

下載插件前端

Highcharts下載地址java

http://www.highcharts.com/downloadjquery

jquery下載地址git

http://jquery.com/github

一、須要引入的腳本canvas

<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>

二、前端顯示片斷瀏覽器

        $('#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)
        });

三、控制器數據綁定片斷ssh