JQuery Highcharts 图表控件

highcharts是基于javascript的高交互的图表封装。目前highcharts可以非常轻松的画出线图，列图，饼图，传播图，区域图等。能兼容主流浏览器(包括IE6)。

相关的资料：

Highcharts 官网：http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

Highcharts 选项参考：http://www.highcharts.com/ref/#chart

以下为饼状图示例：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>图表-饼状</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8"/>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="JS/exporting.js" type="text/javascript"></script>
<style type="text/css">
a:link{ outline: none; text-decoration: none; color: #000;}
a:hover{ text-decoration: underline;}
a:focus{ outline: 0;}
a{ outline: none; text-decoration: none; color: #AAA;}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
var pieType=1;
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'ITOMS工作量统计'
},
subtitle: {
text: '<a href="?t=1">任务单数量</a>  <a href="?t=2">计划工时（小时）</a>  <a href="?t=3">实际人数</a>  <a href="?t=4">实际工时（小时）</a>' //图标的副标题
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
}
}
},
series: <%=returnValue %>
});
});
</script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Project.Highcharts
{
public partial class Demo_Pie : System.Web.UI.Page
{
/*public string data = @"[{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中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办']";*/
public string returnValue = "";
public string returnValue1 = @"[{name: '任务单数量',data: [['IT中心部门', 33.2],{name:'创前万博考试',y:14.5,sliced:true,selected:true},['电大服务中心',1.2],['考试服务中心', 1.2],['财务部', 33.2],['学生服务中心', 14.5],['职教中心', 1.2],['总经办', 1.2]]}]";
public string returnValue2 = @"[{name: '计划工时（小时）',data: [['IT中心部门', 16.5],{name:'创前万博考试',y:3.2,sliced:true,selected:true},['电大服务中心',3.4],['考试服务中心', 0.3],['财务部', 50.8],['学生服务中心', 22.3],['职教中心', 1.8],['总经办', 1.8]]}]";
public string returnValue3 = @"[{name: '实际人数',data: [['IT中心部门', 17.3],{name:'创前万博考试',y:13.2,sliced:true,selected:true},['电大服务中心',19.9],['考试服务中心', 6.1],['财务部', 9.2],['学生服务中心', 3.7],['职教中心', 4.0],['总经办', 4.0]]}]";
public string returnValue4 = @"[{name: '实际工时（小时）',data: [['IT中心部门', 18.7],{name:'创前万博考试',y:12.0,sliced:true,selected:true},['电大服务中心',23.9],['考试服务中心', 5.5],['财务部', 6.7],['学生服务中心', 10.9],['职教中心', 9.0],['总经办', 13.2]]}]";
protected void Page_Load(object sender, EventArgs e)
{
int type = Request["t"] != null ? Convert.ToInt32(Request["t"]) : 1;
string[] array = new string[] { returnValue1, returnValue2, returnValue3, returnValue4 };
returnValue = array[type - 1];
}
}
}

转载于:https://blog.51cto.com/xiaoyaosr/610172

JQuery Highcharts 图表控件相关推荐

JQuery Highcharts图表控件使用说明
JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...
ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表因为要可视化 2. 图表分类条 ...
用于 Windows8 的 Wijmo Charts 图表控件
2019独角兽企业重金招聘Python工程师标准>>> 随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的发布, 大家 ...
图表控件TeeChart安装使用
优秀的图表控件很多,如AnyChart.TeeChart.Highcharts.FusionCharts XT,本文介绍如何在VC6.0上安装使用TeeChart,主要分三步: 第一步:安装TeeCh ...
微软图表控件MsChart
转自:http://tech.ddvip.com/2008-11/122640479791375.html 昨天在网上看到了微软发布了.NET 3.5框架下的图表控件,第一时间抓下来看了一下,发觉功能 ...
跨平台图表控件TeeChart使用教程:导入XML数据
2019独角兽企业重金招聘Python工程师标准>>> TeeChart的最新版中包含了一个自动加载XML数据的新组件.这个组件的名字叫做TTeeXMLSource,用户可以在Tee ...
漂亮好用的ASP.NET图表控件免费的
绝对免费,绝对好用,中文支持绝对好,轻松生成漂亮的2D和3D图表. 这个控件是我找到的免费图表控件中非常好的一个,我一直在关注这个控件,虽然功能未必比得上商业的图表控件强大,但是绝对好用,绝对免费,他 ...

JQuery Highcharts 图表控件

JQuery Highcharts 图表控件相关推荐

最新文章

热门文章