JQuery Highcharts图表控件的使用简介

JQuery Highcharts图表控件使用说明  Highcharts 官网：http://www.highcharts.com Highcharts 官网示例：http://www.highcharts.com/demo/ Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use  具体见代码中的注视说明： >>> 了解更多Highcharts教程的相关内容：   代码 <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " WorkDoneChartByCenter.aspx.cs "  Inherits = " WorkDoneChartByCenter "   %> <! 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 > 工作量统计 - www.jbxue.com </ title >      < script  type ="text/javascript"  src ="JScript/jquery.min.js" ></ script >      < script  src ="JScript/highcharts.js"  type ="text/javascript" ></ script >      < script  src ="JScript/modules/exporting.js"  type ="text/javascript" ></ script > </ head > < body >      < form  id ="form1"  runat ="server" >      < script  type ="text/javascript" >          var  chart;         $(document).ready( function () {              chart  =   new  Highcharts.Chart({                 chart: {                     renderTo:  ' container ' ,           // 放置图表的容器                     defaultSeriesType:  ' column ' ,     // 图表类型line, spline, area, areaspline, column, bar, pie , scatter                      // zoomType: 'x',                  //放大                     inverted:  false                    // 左右显示，默认上下正向                 },                 title: {                                                 text:  ' ITOMS工作量统计 ' ,         // 图标的标题                     style:{}                         // 标题样式                 },                 subtitle: {                                              text:  ' 按中心统计 '                // 图标的副标题                 },                 xAxis: {                                                 categories:  <%=  xAxisCategories  %> ,  // X轴的坐标值                     labels: {                         rotation:  - 45 ,                         align:  ' right ' ,                         style: {font:  ' normal 13px 宋体 ' }                     }                 },                 yAxis: {                     min:  0 ,                     title: {text:  ' 数量（小时/个数） ' }   // Y轴坐标标题  labels:纵柱标尺                 },                 legend: {                                // 【图例】位置样式                     layout:  ' horizontal ' ,                // 【图例】显示的样式：水平（horizontal）/垂直（vertical）                     backgroundColor:  ' #FFFFFF ' ,                     borderColor:  ' #CCC ' ,                     borderWidth:  1 ,                     align:  ' center ' ,                     verticalAlign:  ' top ' ,                     enabled: true ,                      // x: 100,                     y:  50 ,                      // floating: true,                     shadow:  true                 },                  // loading: {  需要配合chart.showLoading();使用                  //     hideDuration: 10000,                  //     showDuration: 10000                  // },                 tooltip: {                     formatter:  function () {                  // 当鼠标悬置数据点时的格式化提示                          return   ' <b> ' +   this .x  + ' </b><br/> ' +   this .series.name  +   ' :  ' +  Highcharts.numberFormat( this .y,  1 );                     }                 },                 credits: {                     enabled:  false                 },                 plotOptions: {                     column: {                         pointPadding:  0.2 ,   // 图表柱形的                         borderWidth:  0        // 图表柱形的粗细   //pointWidth:15    你想显示的宽度(number型）                     },bar: {                         dataLabels: {                             enabled:  false                         }                     }                 },                 series: <%=  returnValue  %>               });                           // chart.showLoading();         });      </ script >      < div  id ="container"  style ="min-width: 800px; height: 500px; margin: 0 2em" ></ div >      < div  class ="result" ></ div >      </ form > </ body > </ html >   代码 using  System; using  System.Data; using  System.Configuration; using  System.Collections; using  System.Web; using  System.Web.Security; using  System.Web.UI; using  System.Web.UI.WebControls; using  System.Web.UI.WebControls.WebParts; using  System.Web.UI.HtmlControls; public   partial   class  WorkDoneChartByCenter : System.Web.UI.Page {      public   string  returnValue  =   " [{name: '任务单数量',data: [370.0,162.0,13,13,370.0,162.0,13,13]}, {name: '计划工时（小时）',data: [120,23,25,2,370.0,162.0,13,13]}, {name: '实际人数',data: [60,43,65,20,30.0,12.0,13,103]}, {name: '实际工时（小时）',data: [89,57,114,26,32,52.0,43,63]}] " ;      public   string  xAxisCategories  =   " ['IT中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办'] " ;           protected   void  Page_Load( object  sender, EventArgs e)     {     } }  截图：截出来图片的颜色丢失，实际颜色效果可以参考Highcharts官网提供的实例。     作者：郑某人 出处：http://jsonzheng.cnblogs.com 欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能推荐或关注。