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 欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能推荐或关注。