jquery图表插件highcharts
1. 官网及features？
2. highcharts（asp.net）？
3. 代码下载
1. 官网及features？
highcharts官网：http://www.highcharts.com/
demo site ： http://www.highcharts.com/demo/?example=bar-basic&theme=grid
features：
2. highcharts使用（asp.net）？
页面Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspNetHighCharts._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <!-- 1. Add these JavaScript inclusions in the head of your page --> <mce:script src="Highcharts/js/jquery.min.js" mce_src="Highcharts/js/jquery.min.js" type="text/javascript"></mce:script> <mce:script src="Highcharts/js/highcharts.js" mce_src="Highcharts/js/highcharts.js" type="text/javascript"></mce:script> <!-- 1a) Optional: add a theme file --> <%--<mce:script src="Highcharts/js/themes/grid.js" mce_src="Highcharts/js/themes/grid.js" type="text/javascript"></mce:script>--%> <mce:script src="Highcharts/js/modules/exporting.js" mce_src="Highcharts/js/modules/exporting.js" type="text/javascript"></mce:script> <!-- 2. Add the JavaScript to initialize the chart on document ready --> <mce:script type="text/javascript"><!-- var categories = new Array(); // Build the categories object <% for(int i = 0; i < chartProperties.xAxisCategories.Count; i++) { %> categories[<%= i %>] = '<%= chartProperties.xAxisCategories[i] %>'; <% } %> var series = new Array(); // Buld the series object series['name'] = '<%= chartProperties.series.name %>'; var data = new Array(); <% for(int i = 0; i < chartProperties.series.data.Count; i++) { %> data[<%= i %>] = <%= chartProperties.series.data[i] %>; <% } %> series['data'] = data; var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'bar' }, title: { text: '<%= chartProperties.titleText %>' }, subtitle: { text: '<%= chartProperties.subtitleText %>' }, xAxis: { categories: categories, title: { text: '<%= chartProperties.xAxisTitleText %>' } }, yAxis: { min: <%= chartProperties.yAxisMinValue %>, title: { text: 'yAxis', align: 'high' } }, tooltip: { formatter: function() { return '<%= chartProperties.tooltip %>'; /*return '' + this.series.name + ': ' + this.y + ' millions';*/ } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 60, floating: true, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true }, credits: { enabled: false }, series: [series] }); }); // --></mce:script> </head> <body> <form id="form1" runat="server"> <div> <!-- 3. Add the container --> <div id="container" style="width: 500px; height: 250px; margin: 0 auto"></div> </div> </form> </body> </html>
HighChartProperties.cs：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace AspNetHighCharts { public class HighChartProperties { public string titleText = string.Empty; public string subtitleText = string.Empty; public IList<string> xAxisCategories = new List<string>(); public string xAxisTitleText = string.Empty; public int yAxisMinValue = new int(); public string yAxisTitleText = string.Empty; public string tooltip = string.Empty; public int legendXPos = new int(); public int legendYPos = new int(); public Series series = new Series(); } }
Series.cs：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace AspNetHighCharts { public class Series { public string name = string.Empty; public IList<double> data = new List<double>(); } }
3. 代码下载