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

//導(dǎo)入DoNet.HighCharts包
using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using System.Drawing;
using NorthWindTableAdapters;
/// <summary>
/// 種類(lèi)商品價(jià)格統(tǒng)計(jì)類(lèi)
/// </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)建強(qiáng)名稱(chēng)數(shù)據(jù)集表對(duì)象和數(shù)據(jù)適配器對(duì)象
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);
  //按產(chǎn)品種類(lèi)分組顯示Linq表達(dá)式
   avgPriceList =
    (
     from p in avgPriceDt
     group p by p.CategoryID into g//根據(jù)種類(lèi)編號(hào)分組
     select new CategoryPrice
     {
      //種類(lèi)名稱(chēng)
      CategoryName=categoryDt.First(c=>c.CategoryID==g.Key).CategoryName,
      //種類(lèi)商品均價(jià)
      Price = g.Average(c => c.UnitPrice)
     }
    ).ToList();
  //顯示柱形圖的種類(lèi)名稱(chēng)數(shù)組
  string[] categories = new string[avgPriceList.Count()];
  int index = 0;
  foreach (var item in avgPriceList)
  {
   categories[index++] = item.CategoryName;
  }
  Data data = LoadDate();//柱形圖動(dòng)態(tài)綁定的數(shù)據(jù)源
  //省略HighCharts腳本代碼，同mvc代碼
  div1.InnerHtml = chart.ToHtmlString();//轉(zhuǎn)換為HighCharts的客戶(hù)端腳本插入到div1中
}
 //根據(jù)匯總的種類(lèi)商品創(chuàng)建柱形圖節(jié)點(diǎn)對(duì)象的方法
 private Data LoadDate()
 {
   Data data = null;
   int index =-1;
   //創(chuàng)建柱形圖顯示的節(jié)點(diǎn)對(duì)象
   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;
 }
}