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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值