绘制饼图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]]}]});});

柱形图控制器方法（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();#endregionprivate 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 avgPriceDtgroup 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;}
}