日韩欧美福利在线,欧美亚洲另类热图,岛国大片免费

HighCharts圖表控件在ASP.NET WebForm中的應用

轉帖|使用教程|編輯：鄭恭琳|2015-09-30 09:56:33.000|閱讀 978 次

概述：Highcharts是一款純HTML5/JavaScript編寫的圖表庫，為Web網站和Web應用程序提供直觀、交互式圖表。本篇文章將為大家簡單介紹HighCharts圖表控件在ASP.NET WebForm中的應用。

Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支持的圖表類型有折線圖、曲線圖、區域圖、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等圖表類型。

< HighCharts最新版下載 >

HighCharts使用原理如下圖所示：

普通開發模式是在前端應用Jquery和HighChartsJS庫文件，然后在<head>頭中寫Js腳本，例如繪制餅圖Jquery腳本如下：

$(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });

其中data屬性為圖表綁定數據源。但這種方式也存在明顯問題：

前端代碼量過大
綁定動態數據比較困難，可取的方法是使用$.AJAX異步方法解析WebServices或者一般處理程序ashx，然后對返回結果進行JSON序列化處理，比較麻煩容易出錯。
HighCharts的Js調用代碼無法實現代碼重用。

解決方案是使用第三方HighCharts組件DoNet.HighCharts, 該組件是一個服務器端生成HighCharts Js腳本的開源組件，然后通過輸出流的方式插入到頁面Body塊的DIV中,原理如下圖所示：

DoNet.HighCharts開發環境為(二選一)

VS2008+ASP.NET MVC3+.NET 3.5
VS2010+.NET 4.0

DoNet.HighCharts開源項目是以ASP.NET MVC3 Project的形式分發的，開發人員可以參考控制器文件夾Controlls中的DemoController中每種圖表的后臺代碼（和前臺HighCharts JS代碼基本一致）

MVC原理在這里做簡單表述，便于程序員閱讀該代碼。

M:Module 模型層
V:View 視圖層
C:Controll 控制層

當客戶端發送一個Action動作時，根據動作名找到Controll控制器中相應的方法名。例如//localhost/Charts/Demo/BasicLine，MVC框架根據全局路由配置自動映射到BasicLine控制器方法，控制器方法返回一個Result并導航到Views文件夾下的同名視圖BasicLine.cshtml(cshtml可以理解為WebForm的aspx)然后加載視圖。
Asp.net mvc和Asp.net Web Form方式不同，所以以上MVC實現方式需要修改才能在WebForm中使用。以下以“各種類產品均價統計功能”柱形圖（涉及到NorthWind數據庫的Products和Categories表）為例說明WebForm中如何使用DoNet.HighCharts。
1:創建查詢視圖View_CategoryAvgPrice

2:創建強名稱數據集NorthWind.xsd

數據集分為強名稱數據集和弱名稱數據集(DataSet)兩種，具體原理就不展開描述了。拖放View_CategoryAvgPrice和Categories表到數據集中。
3:柱形圖控制器方法（ColumnWithDrilldown）在aspx頁面中的主要代碼實現

//導入DoNet.HighCharts包
using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using System.Drawing;
using  NorthWindTableAdapters;
/// <summary>
/// 種類商品價格統計類
/// </summary>
public class CategoryPrice
{
    public Decimal Price { set; get; }
    public string CategoryName { set; get; }
}
public partial class ColumnWithDrilldown : System.Web.UI.Page
{
    #region 創建強名稱數據集表對象和數據適配器對象
private NorthWind.View_CategoryAvgPriceDataTable avgPriceDt;
avgPriceDt= new NorthWind.View_CategoryAvgPriceDataTable();
    private NorthWind.CategoriesDataTable categoryDt = new NorthWind.CategoriesDataTable();
    private View_CategoryAvgPriceTableAdapter avgPriceAdapter = new View_CategoryAvgPriceTableAdapter();
    private CategoriesTableAdapter categoryAdapter = new CategoriesTableAdapter();
    #endregion
    private List<CategoryPrice> avgPriceList=null;//綁定數據源集合
    protected void Page_Load(object sender, EventArgs e)
    {
        LoadColumnWithDrilldown();
    }
    public void LoadColumnWithDrilldown()
    {
        avgPriceAdapter.Fill(avgPriceDt);
        categoryAdapter.Fill(categoryDt);
        //按產品種類分組顯示Linq表達式
         avgPriceList =
             (
                  from p in avgPriceDt
                  group p by p.CategoryID into g//根據種類編號分組
                  select new CategoryPrice
                  {
                      //種類名稱
                      CategoryName=categoryDt.First(c=>c.CategoryID==g.Key).CategoryName,
                      //種類商品均價
                      Price = g.Average(c => c.UnitPrice)
                  }
              ).ToList();
        //顯示柱形圖的種類名稱數組
        string[] categories = new string[avgPriceList.Count()];
        int index = 0;
        foreach (var item in avgPriceList)
        {
            categories[index++] = item.CategoryName;
        }
        Data data = LoadDate();//柱形圖動態綁定的數據源
       //省略HighCharts腳本代碼，同mvc代碼
        div1.InnerHtml = chart.ToHtmlString();//轉換為HighCharts的客戶端腳本插入到div1中
}
   //根據匯總的種類商品創建柱形圖節點對象的方法
    private  Data LoadDate()
    {
            Data data = null;
            int index =-1;
           //創建柱形圖顯示的節點對象
            DotNet.Highcharts.Options.Point []pointList=new DotNet.Highcharts.Options.Point[avgPriceList.Count];
            foreach (var item in avgPriceList)
            {
                pointList[++index] = new DotNet.Highcharts.Options.Point
                {
                    Y = (Number)(item.Price*100)/100.0,
                    Color = Color.FromName(string.Format("colors[{0}]", index))
                };     
            }
            data = new Data(pointList);
            return data;       
    }
}

顯示效果如下圖所示：