JQuery Highcharts图表控件使用说明
生活随笔
收集整理的這篇文章主要介紹了
JQuery Highcharts图表控件使用说明
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JQuery Highcharts圖表控件使用說明
具體見代碼中的注視說明：
<!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>工作量統(tǒng)計?-?奧鵬</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工作量統(tǒng)計',????????//圖標的標題
????????????????????style:{}????????????????????????//標題樣式
????????????????},
????????????????subtitle:?{?????????????????????????
????????????????????text:?'按中心統(tǒng)計'??????????????//圖標的副標題
????????????????},
????????????????xAxis:?{????????????????????????????
????????????????????categories:?<%=?xAxisCategories?%>,?//X軸的坐標值
????????????????????labels:?{
????????????????????????rotation:?-45,
????????????????????????align:?'right',
????????????????????????style:?{font:?'normal?13px?宋體'}
????????????????????}
????????????????},
????????????????yAxis:?{
????????????????????min:?0,
????????????????????title:?{text:?'數(shù)量（小時/個數(shù)）'}??//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()?{?????????????????//當鼠標懸置數(shù)據(jù)點時的格式化提示
????????????????????????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.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:?'任務單數(shù)量',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:?'實際人數(shù)',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中心部門',?'創(chuàng)前萬博考試',?'電大服務中心',?'考試服務中心','財務部','學生服務中心','職教中心','總經(jīng)辦']";
????
????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????}
}
?
Highcharts 官網(wǎng)：http://www.highcharts.comHighcharts 官網(wǎng)示例：http://www.highcharts.com/demo/
Highcharts 官網(wǎng)文檔：http://www.highcharts.com/documentation/how-to-use
?
?
具體見代碼中的注視說明：
?
代碼<%@?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>工作量統(tǒng)計?-?奧鵬</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工作量統(tǒng)計',????????//圖標的標題
????????????????????style:{}????????????????????????//標題樣式
????????????????},
????????????????subtitle:?{?????????????????????????
????????????????????text:?'按中心統(tǒng)計'??????????????//圖標的副標題
????????????????},
????????????????xAxis:?{????????????????????????????
????????????????????categories:?<%=?xAxisCategories?%>,?//X軸的坐標值
????????????????????labels:?{
????????????????????????rotation:?-45,
????????????????????????align:?'right',
????????????????????????style:?{font:?'normal?13px?宋體'}
????????????????????}
????????????????},
????????????????yAxis:?{
????????????????????min:?0,
????????????????????title:?{text:?'數(shù)量（小時/個數(shù)）'}??//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()?{?????????????????//當鼠標懸置數(shù)據(jù)點時的格式化提示
????????????????????????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:?'任務單數(shù)量',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:?'實際人數(shù)',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中心部門',?'創(chuàng)前萬博考試',?'電大服務中心',?'考試服務中心','財務部','學生服務中心','職教中心','總經(jīng)辦']";
????
????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????}
}
?截圖：截出來圖片的顏色丟失，實際顏色效果可以參考Highcharts官網(wǎng)提供的實例
?
?
轉載于:https://www.cnblogs.com/jsonzheng/archive/2011/01/18/1938489.html
總結
以上是生活随笔為你收集整理的JQuery Highcharts图表控件使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET MVC 3: Razor
- 下一篇： Tomcat无法启动,报错java.la