个人认为HighChart做报表还是很不错的,从报表的样式还是性能都是很不错的选择。

1、新建一个html页面,命名为:ReportTest.html

    <script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/Vendor.js"></script>
<script type="text/javascript" src="js/report/highcharts.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> <div id="container" style="min-width:500px;height:300px"></div>

2、新建一个js文件,命名为:ReportShow.js

 $(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
//常规图表选项设置
chart: {
renderTo: "container", //在哪个区域呈现,对应HTML中的一个元素ID
plotBackgroundColor: null, //绘图区的背景颜色
plotBorderWidth: null, //绘图区边框宽度
plotShadow: false //绘图区是否显示阴影
}, //图表的主标题
title: {
text: "2015年xx公司IT类固定资产分类"
},
//当鼠标经过时的提示设置
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage}%</b>",
percentageDecimals:
},
//每种图表类型属性设置
plotOptions: {
//饼状图
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: true,
color: "#000000",
connectorColor: "#000000",
formatter: function () {
//Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度
return "<b>" + this.point.name + "</b>: " + Highcharts.numberFormat(this.percentage, ) + " %";
}
}
}
},
//图表要展现的数据
series: [{
type: "pie",
name: "资产分类",
}]
});
});
     $.ajax({
type: "GET",
url: "Test.ashx",//提供数据的Servlet
success: function (data) {
//通过eval() 函数可以将JSON字符串转化为对象
var obj = eval(data); //定义一个数组
browsers = [];
//获取总资产数量
var AssetTotal = ;
for (var t in obj) {
AssetTotal += obj[t]["ARNumber"];
} //资产总数是否为零
if (AssetTotal > ) {
//迭代,把异步获取的数据放到数组中
for (var o in obj) {
browsers.push([obj[o]["ANCName"], obj[o]["ARNumber"] / AssetTotal]);
}
} //设置数据
chart.series[].setData(browsers);
},
error: function (e) {
alert(e);
}
}); });

3、新建一个.ashx文件,命名为:Test.ashx

 public void ProcessRequest(HttpContext context)
{ string sql = "select ANCName,count(ARNumber) as ARNumber from view_AssetRegisterTypeName where ARStatusId = 1 group by ARAssetId,ANCName Having ARAssetId!=9999999 order by ARNumber Desc";
DataAccess<Model.ReportAssetRegisterType> model = new DataAccess<ReportAssetRegisterType>();
List<Model.ReportAssetRegisterType> list = model.ExecuteToList(sql);
string JSON = JsonConvert.SerializeObject(list); context.Response.Write(JSON); }

4、显示表报输出结果:

HighChart报表之饼图的更多相关文章

  1. 【BIEE】16_饼图应用

    在BIEE中,我们可以使用饼图来展示报表数据 饼图在使用中有三元素:①切片 ②饼图 ③度量 那么我们来分别看下这三个元素的功能分别是什么? 我们通过上图可以看出度量中存在2个度量,那么此时的饼图数量是 ...

  2. 微信小程序实战篇:基于wxcharts.js绘制移动报表

    前言 微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. ...

  3. DailyTick 开发实录 —— UI 设计

    上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...

  4. “耐撕”团队记账本 剧透

    β发布之后,我们团队开始fork"OneZero"团队的记账本程序.我们在原来的基础上添加了以下功能: 下面是我们团队记账本程序演示的视频:http://v.youku.com/v ...

  5. hadoop离线数据存储和挖掘架构

    前序: 当你把你知道的东西,写下来,让人看明白是一种境界:当你能把自己写下来的东西给人讲明白,又是另一种境界.在这个过程中,我们都需要历练. 基于hadoop集群下海量离线数据存储和挖掘分析架构: 架 ...

  6. 在饼图上显示百分比值(报表生成器和 SSRS)

    在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...

  7. Highchart 饼图联动

    感觉好久没有更新博客了,最近一直忙着毕业论文,紧接着就开始搭建数据库,实在抽不出时间写. 正好趁着做数据库,写一写关于Highchart里两个饼图之间的互动. 用到的数据比较大,我也懒得修饰了,涉及到 ...

  8. 帆软报表(finereport) 饼图联动

    饼图联动:点击饼图1,饼图2和饼图3显示饼图1的关联数据,接着点击饼图2,饼图3显示饼图2的关联数据,点击上方清除级联,饼图则恢复默认展示状态 下面以上图示例效果为例,说明制作过程. 1.为每个饼图准 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(31)-MVC使用RDL报表

    系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...

随机推荐

  1. [讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得

    [讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得 prerouting 发表于 2010-5-9 16:50:46 https://www.itsk.com/thread-36634- ...

  2. 模拟微信上传图片(带预览,支持预览gif)

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  3. Find命令的用法

    1. 在某目录下查找文件 [root@localhost ~]# find /usr/local -name pci.ids* /usr/local/share/pci.ids.gz [root@lo ...

  4. 使用Kylin构建企业大数据分析平台的4种部署方式

    本篇博客重点介绍如何使用Kylin来构建大数据分析平台.根据官网介绍,其实部署Kylin非常简单,称为非侵入式安装,也就是不需要去修改已有的 Hadoop大数据平台.你只需要根据的环境下载适合的Kyl ...

  5. DFA敏感词过滤

    import java.io.UnsupportedEncodingException; import java.nio.ByteBuffer; import java.util.ArrayList; ...

  6. Nodejs express中创建ejs项目,解决express下默认创建jade,无法创建ejs问题

    最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: express -t ejs microblog 可是执行后,仍 ...

  7. 简单谈一谈JavaScript中的变量提升的问题

    1,随笔由来 第一天开通博客,用于监督自己学习以及分享一点点浅见,不出意外的话,应该是一周一更或者一周两更.  此博客所写内容主要为前端工作中遇上的一些问题以及常见问题,在此基础上略微发表自己的一点浅 ...

  8. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

  9. java字节流与字符流的区别

    1.Java的字节流: InputStream是所有字节输入流的祖先,而OutputStream是所有字节输出流的祖先. 2.Java的字符流: Reader是所有读取字符串输入流的祖先,而write ...

  10. Shell父进程获取子进程的变量值

    #!/bin/kshshit=""export shitshit=$(su - grid -c 'echo $ORACLE_BASE')pvar=$(subvar="he ...