使用FusionCharts出柱状图和饼状图
在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了FusionCharts。
FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , JSP技术的, PHP , ColdFusion等,提供互动性和强大的图表。使用XML作为其数据接口, FusionCharts充分利用流体美丽的Flash创建紧凑,互动性和视觉逮捕图表。当然他的有点我就不说了,百科上说的很多...
为了很炫,我们就使用的是FusionCharts里面的MSColumn3D.swf和Pie3D.swf的3D效果,具体不说了,直接贴代码了,这样看着清楚。
(1)创建柱状图的关键代码
public void CreateChart(List<AJSLTJModel> list)
{
string strCategories;
string strCategories2; strchartXML = "<graph formatNumber='0' formatNumberScale='0' >";
strchartXML2 = "<graph formatNumber='0' formatNumberScale='0' >";
strCategories = "<categories>";
strCategories2 = "<categories>"; string strDataCurr1 = "<dataset seriesName='登记数量' color='AFD8F8'>";
string strDataPrev1 = "<dataset seriesName='登记面积' color='F6BD0F'>"; for (int i = 0; i < list.Count; i++)
{
AJSLTJModel ajstjModel = list[i];
string catagry = ajstjModel.ResYear + "年" + ajstjModel.ResMonth + "月";
string resTJSL = ajstjModel.ResDJSL.ToString();
string resTJMJ = ajstjModel.ResDJMJ.ToString();
strCategories += "<category name='" + catagry + "' />";
strCategories2 += "<category name='" + catagry + "' />";
strDataCurr1 += "<set value='" + resTJSL + "' />";
strDataPrev1 += "<set value='" + resTJMJ + "' />"; } strCategories += "</categories>";
strCategories2 += "</categories>"; strDataCurr1 += "</dataset>";
strDataPrev1 += "</dataset>"; strchartXML += strCategories + strDataCurr1 + "</graph>";
strchartXML2 += strCategories2 + strDataPrev1 + "</graph>";
ClientScript.RegisterStartupScript(this.GetType(), "showDiv", " <script> updateChart(\"" + strchartXML + "\",\"" + strchartXML2 + "\") </script> "); }
(2)创建饼状图的关键代码
public void CreateChartPie(List<AJSLTJModel> list)
{
strchartXMLPie1 = "<chart palette='4' decimals='0' enableSmartLabels='1' enableRotation='0' bgColor='99CCFF,FFFFFF' bgAlpha='40,100' bgRatio='0,100' bgAngle='360' showBorder='1' startingAngle='70' >";
strchartXMLPie2 = "<chart palette='4' decimals='0' enableSmartLabels='1' enableRotation='0' bgColor='99CCFF,FFFFFF' bgAlpha='40,100' bgRatio='0,100' bgAngle='360' showBorder='1' startingAngle='70' >"; string strDataCurr1 = "";
string strDataCurr2 = ""; for (int i = 0; i < list.Count; i++)
{
AJSLTJModel ajstjModel = list[i];
string catagry = ajstjModel.ResYear + "年" + ajstjModel.ResMonth + "月";
string resTJSL = ajstjModel.ResDJSL.ToString();
string resTJMJ = ajstjModel.ResDJMJ.ToString();
strDataCurr1 += "<set label='"+catagry+"' value='"+resTJSL+"' />";
strDataCurr2 += "<set label='" + catagry + "' value='" + resTJMJ + "' />";
}
strchartXMLPie1 += strDataCurr1 + "</chart>";
strchartXMLPie2 += strDataCurr2 + "</chart>"; ClientScript.RegisterStartupScript(this.GetType(), "showDiv", " <script> updatePie(\"" + strchartXMLPie1 + "\",\"" + strchartXMLPie2 + "\") </script> "); }
(3)前台JS代码:
function updateChart(strchartXML,strchartXML2) {
var chart1div = document.getElementById("chart1div");
if (chart1div != null) {
var chart1 = new FusionCharts("../FusionChart/MSColumn3D.swf", "chart1Id", screen.width - 400, screen.height - 500, "0", "0");
chart1.addParam("wmode", "Opaque");
chart1.setDataXML(strchartXML);
chart1.render("chart1div");
} var chart2div = document.getElementById("chart2div");
if (chart2div != null) {
var chart2 = new FusionCharts("../FusionChart/MSColumn3D.swf", "chart2Id", screen.width - 400, screen.height - 500, "0", "0");
chart2.addParam("wmode", "Opaque");
chart2.setDataXML(strchartXML2);
chart2.render("chart2div");
}
} function updatePie(strchartXMLPie1, strchartXMLPie2) {
var pie1div = document.getElementById("pie1div");
if (pie1div != null) {
var pie1 = new FusionCharts("../FusionChart/Pie3D.swf", "pie1Id", screen.width - 400, screen.height - 500, "0", "0");
pie1.addParam("wmode", "Opaque");
pie1.setDataXML(strchartXMLPie1);
pie1.render("pie1div");
} var pie2div = document.getElementById("pie2div");
if (pie2div != null) {
var pie2 = new FusionCharts("../FusionChart/Pie3D.swf", "pie2Id", screen.width - 400, screen.height - 500, "0", "0");
pie2.addParam("wmode", "Opaque");
pie2.setDataXML(strchartXMLPie2);
pie2.render("pie2div");
}
}
(4)还是看看效果图吧
OK,很炫吧,打开的时候如同雨后春笋,3D效果就是炫....使用完毕
使用FusionCharts出柱状图和饼状图的更多相关文章
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
- FusionChart实现柱状图、饼状图的动态数据显示 附Demo
最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...
- FusionChart实现柱状图、饼状图的动态数据显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- echarts 柱状图和饼状图动态获取后台数据
运用echarts来实现图表 1.首先下载echarts包 http://echarts.baidu.com/echarts2/doc/example.html,在这里我下载的是 2.将echart ...
- iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)
1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- Java创建柱状图及饼状图
Java创建图表其实还是很方便的,但是要引入相关的jar包.如下 jfreechart.jar jcommon,jar gnujaxp.jar 其中最主要的是jfreechart.jar. 下面就让我 ...
随机推荐
- cocos2d-x 混合模式
在OpenGL(ES),使用glBlendFunc函数实现实现混合模式,cocos2d-x中可以使用BlendFunc. 什么是颜色混合?简单来说就是将RGBA中的A,经行操作处理.具体一点,就是把某 ...
- caffe+NVIDIA安装+CUDA-7.5+ubuntu14.04(显卡GTX1080)
首先强调,我们实验室的机器是3.3w的机器,老板专门买来给我们搞深度学习,其中显卡是NVIDIA GeForce GTX1080(最近新出的,装了两块),cpu是intel i7处理器3.3Ghz, ...
- 十一章:用CSS进行布局
本章重点:盒模型与元素浮动. 盒模型: 1.CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.这就是众所周知的盒模型,这里的盒子由内容区域.内容区域周围的空间.内边距和外边缘和边框外面将元素 ...
- spark第二篇--基本原理
==是什么 == 目标Scope(解决什么问题) 在大规模的特定数据集上的迭代运算或重复查询检索 官方定义 aMapReduce-like cluster computing framework de ...
- CTRL key
ctrl key其实是用于扩展键盘,单独一个ctrl键没有什么作用,也没有ascii码,当与其他键相结合时,相当于创造出一个新键.例如:用getchar()侦测输入的字符,当按下ctrl+a时,只输出 ...
- 贪心+树状数组维护一下 Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) D
http://codeforces.com/contest/724/problem/D 题目大意:给你一个串,从串中挑选字符,挑选是有条件的,按照这个条件所挑选出来的字符集合sort一定是最后选择当中 ...
- php添加gd
一 GD简介: php处理图形的扩展库,提供了一系列用来处理图片的API.如果开发过程中发现有页面验证码不能显示,则要考虑检查phpinfo(),是否支持GD库. 二 思路: 网上发现添加GD库的方法 ...
- 关于WIFI DIRECT功能的
http://processors.wiki.ti.com/index.php/WiFi_Direct_Configuration_Scripts#p2p_find https://wire ...
- oomph
http://blog.csdn.net/u011004037/article/details/45679573 这么好个功能起了这么操蛋个名字害得老子一直不知道他干啥的
- iOS \'The sandbox is not sync with the Podfile.lock\'问题解决
iOS \'The sandbox is not sync with the Podfile.lock\'问题解决 HUANGDI 发表于 2015-02-27 09:51:13 问题描述: gith ...