HighCharts图表控件在ASP.NET WebForm中的使用 HighCharts图表控件在ASP.NET WebForm中的使用总结（全）

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

//导入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;
 }
}