HighCharts圖表控件在ASP.NET WebForm中的使用總結（全）

更新時間：2015年08月04日 14:30:21 投稿：mrr

這篇文章主要介紹了HighCharts圖表控件在ASP.NET WebForm中的使用總結（全）,需要的朋友可以參考下

從事過ASP.NET開發(fā)的可能都會接觸到一些圖表控件，比如OWC、ZendGraph等等，這些控件都有一個特點，那就是我們可以像操作.NET中的對象一樣控制它們的某些屬性，有可能在本地開發(fā)好了上傳到服務器端部署運行的時候會出現(xiàn)權限問題而導致不能正常運行。本篇周公講述一個JavaScript的圖表控件，不要小看了這個JavaScript圖表控件，它能生成各種常見的圖表。

Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業(yè)用途使用。目前HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。

HighCharts使用原理如下圖所示：

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

繪制餅圖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屬性為圖表綁定數(shù)據(jù)源。但這種方式也存在明顯問題：

前端代碼量過大
綁定動態(tài)數(shù)據(jù)比較困難，可取的方法是使用$.AJAX異步方法解析WebServices或者一般處理程序ashx，然后對返回結果進行JSON序列化處理，比較麻煩容易出錯。
HighCharts的Js調用代碼無法實現(xiàn)代碼重用。
解決方案是使用第三方HighCharts組件DoNet.HighCharts, 該組件是一個服務器端生成HighCharts Js腳本的開源組件，然后通過輸出流的方式插入到頁面Body塊的DIV中,原理如下圖所示：

DoNet.HighCharts開發(fā)環(huán)境為(二選一)

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

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

M:Module 模型層
V:View 視圖層
C:Controll 控制層
當客戶端發(fā)送一個Action動作時，根據(jù)動作名找到Controll控制器中相應的方法名。例如 http://localhost/Charts/Demo/BasicLine，MVC 框架根據(jù)全局路由配置自動映射到BasicLine控制器方法，控制器方法返回一個Result并導航到Views文件夾下的同名視圖BasicLine.cshtml(cshtml可以理解為WebForm的aspx)然后加載視圖。

Asp.net mvc和Asp.net Web Form方式不同，所以以上MVC實現(xiàn)方式需要修改才能在WebForm中使用。以下以“各種類產品均價統(tǒng)計功能”柱形圖（涉及到NorthWind數(shù)據(jù)庫的Products和Categories表）為例說明WebForm中如何使用DoNet.HighCharts。

1: 創(chuàng)建查詢視圖View_CategoryAvgPrice

2: 創(chuàng)建強名稱數(shù)據(jù)集NorthWind.xsd

數(shù)據(jù)集分為強名稱數(shù)據(jù)集和弱名稱數(shù)據(jù)集(DataSet)兩種，具體原理就不展開描述了。拖放View_CategoryAvgPrice和Categories表到數(shù)據(jù)集中。

3: 柱形圖控制器方法（ColumnWithDrilldown）在aspx頁面中的主要代碼實現(xiàn)

柱形圖控制器方法（ColumnWithDrilldown）在aspx頁面中的主要代碼實現(xiàn)

//導入DoNet.HighCharts包
using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using System.Drawing;
using NorthWindTableAdapters;
/// <summary>
/// 種類商品價格統(tǒng)計類
/// </summary>
public class CategoryPrice
{
 public Decimal Price { set; get; }
 public string CategoryName { set; get; }
}
public partial class ColumnWithDrilldown : System.Web.UI.Page
{
 #region 創(chuàng)建強名稱數(shù)據(jù)集表對象和數(shù)據(jù)適配器對象
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;//綁定數(shù)據(jù)源集合
 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//根據(jù)種類編號分組
     select new CategoryPrice
     {
      //種類名稱
      CategoryName=categoryDt.First(c=>c.CategoryID==g.Key).CategoryName,
      //種類商品均價
      Price = g.Average(c => c.UnitPrice)
     }
    ).ToList();
  //顯示柱形圖的種類名稱數(shù)組
  string[] categories = new string[avgPriceList.Count()];
  int index = 0;
  foreach (var item in avgPriceList)
  {
   categories[index++] = item.CategoryName;
  }
  Data data = LoadDate();//柱形圖動態(tài)綁定的數(shù)據(jù)源
  //省略HighCharts腳本代碼，同mvc代碼
  div1.InnerHtml = chart.ToHtmlString();//轉換為HighCharts的客戶端腳本插入到div1中
}
 //根據(jù)匯總的種類商品創(chuàng)建柱形圖節(jié)點對象的方法
 private Data LoadDate()
 {
   Data data = null;
   int index =-1;
   //創(chuàng)建柱形圖顯示的節(jié)點對象
   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;
 }
}

顯示效果如下圖所示：