FusionCharts simple demo for (html+js、APS.NET Webform、MVC)
做GIS或其他内部数据统计项目的应该对FusionCharts也不会太陌生，简单易用已无需多说什么了，只是有时候框架不同，实现起来也稍有差异
引用dll调用FusionCharts类的静态方法RenderChartHTML 返回html绑定在数据控件上更为符合webform；
使用JS代码new FusionCharts对象，调用对象的setDataXML或者setDataURL方法更为符合MVC
1、HTML+JS
<!--html-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/package/FusionCharts/Charts/FusionCharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
initChars();
}) function initChars() {
var chart = new FusionCharts("/package/FusionCharts/Charts/2Column3D.swf", "ChartId", "600", "350");
//1、加载字符串
//var dataXml = "<chart rotateYAxisName='0' baseFont='微软雅黑' baseFontSize='12' caption='' yAxisName='水果数量' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'><set label='香蕉' value='12' /><set label='橘子' value='55' /><set label='苹果' value='23' /><set label='人参果' value='20' /></chart>";
//chart.setDataXML(dataXml);
//2、加载xml
chart.setDataURL("/package/FusionCharts/FruitsData.xml");
chart.render("showData");
}
</script>
</head>
<body>
<div id="showData">
</div>
</body>
</html> <!--xml-->
<chart rotateYAxisName='0' baseFont='微软雅黑' baseFontSize='12' caption='' yAxisName='水果数量' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'>
<set label='香蕉' value='12' />
<set label='橘子' value='55' />
<set label='苹果' value='23' />
<set label='人参果' value='20' />
</chart>
2、ASP.NET Webform
<!-------------aspx---------------->
<form id="form1" runat="server">
<div>
<table id="tbl" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem Text="柱状图" Value="0"></asp:ListItem>
<asp:ListItem Text="饼状图" Value="1"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</td>
</tr>
</table>
</div>
</form> <!-------------code behind----------------> protected void Page_Load(object sender, EventArgs e)
{
Panel1.Controls.Clear();
Dictionary<string, int> data = new Dictionary<string, int>() {
{"香蕉",12},
{"橘子",55},
{"苹果",23},
{"人参果",20}
};
Panel1.Controls.Add(ShowNewChart(data, DropDownList1.SelectedValue, "数量"));
} /// <summary>
/// 绑定图形数据
/// </summary>
/// <param name="dic">数据</param>
/// <param name="Type">图形类型</param>
/// <param name="yAxisName">柱状图显示标题</param>
/// <returns></returns>
private LiteralControl ShowNewChart(Dictionary<string, int> dic, string Type, string yAxisName)
{
StringBuilder sb = new StringBuilder();
sb.Append("<chart rotateYAxisName='0' baseFont='微软雅黑' baseFontSize='12' caption='' xAxisName='' yAxisName='" + yAxisName + "' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'>");
foreach (string key in dic.Keys)
{
sb.AppendFormat("<set label='{0}' value='{1}'/>", key, dic[key]);
}
sb.AppendFormat("</chart>");
string types = "";
if (Type == "1")
{
//饼状图 swf路径
types = "package/FusionCharts/Charts/Pie3D.swf";
}
else if (Type == "0")
{
//柱状图
types = "package/FusionCharts/Charts/2Column3D.swf";
}
return new LiteralControl(FusionCharts.RenderChartHTML(types, "", sb.ToString(), "chart1", "650", "250", false, false)); }
3、ASP.NET MVC
//--------------------------view----------------------------------
<script src="@Url.Content("~/package/FusionCharts/Charts/FusionCharts.js")" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
initChars('@Url.Content("~/package/FusionCharts/Charts/2Column3D.swf")');
BindslMapTypeChange();
})
//初始化图表
function initChars(fusionChartsPath) {
var chart = new FusionCharts(fusionChartsPath, "ChartId", "600", "350");
chart.setDataXML("@(new MvcHtmlString(ViewData.Model))");
chart.render("showData");
}
//绑定图表类型选择按钮事件
function BindslMapTypeChange() {
$('#slMapType').change(function () {
if ($(this).val() == "1") {
initChars('@Url.Content("~/package/FusionCharts/Charts/2Column3D.swf")');
}
else {
initChars('@Url.Content("~/package/FusionCharts/Charts/Pie3D.swf")');
}
})
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
图形类型：<select id="slMapType"><option value="1">柱形图</option>
<option value="2">饼形图</option>
</select>
</td>
</tr>
<tr>
<td id="showData">
</td>
</tr>
</table> //--------------------------action----------------------------------
public ActionResult Index()
{
Dictionary<string, int> data = new Dictionary<string, int>() {
{"香蕉",12},
{"橘子",55},
{"苹果",23},
{"人参果",20}
};
ViewData.Model = GetChartXml(data, "水果数量");
return View();
} /// <summary>
/// 绑定图形数据
/// </summary>
/// <param name="dic">数据</param>
/// <param name="Type">图形类型</param>
/// <param name="yAxisName">柱状图显示标题</param>
/// <returns></returns>
private string GetChartXml(Dictionary<string, int> dic, string yAxisName)
{
StringBuilder sb = new StringBuilder();
sb.Append("<chart rotateYAxisName='0' baseFont='微软雅黑' baseFontSize='12' caption='' xAxisName='' yAxisName='" + yAxisName + "' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'>");
foreach (string key in dic.Keys)
{
sb.AppendFormat("<set name='{0}' value='{1}'/>", key, dic[key]);
}
sb.AppendFormat("</chart>");
return sb.ToString();
}
源码：http://files.cnblogs.com/NotAnEmpty/FusionCharts.rar
FusionCharts simple demo for (html+js、APS.NET Webform、MVC)的更多相关文章
- simple demo of Handlebars.js & jquery.js
simple demo of Handlebars.js & jquery.js <html> <head> <script src="jquery-1 ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- js验证表单密码、用户名是否输入--JS的简单应用
在登录.注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名.密码时,系统会弹出提示框.提示框信息提示内容是我们密码没有输入密码或者用户名等.那么这样的弹出框效果是如何实现的呢?文章标题既然与j ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- webpack+vue+vueRouter模块化构建小demo实例超详细步骤（附截图、代码、入门篇）
说明:本demo使用yarn代替npm指令来下载一系列依赖,有详细指令说明:使用WebStorm下Terminal来输入指令: >开始(确认已经安装node环境和yarn包管理工具) 1.新建项 ...
- 友盟消息推送api、python sdk问题、测试demo代码
一,友盟消息推送python服务端sdk地址和文档地址 1.sdk地址:http://dev.umeng.com/system/resources/W1siZiIsIjIwMTYvMDgvMTkvMT ...
- js 获取请求网络协议、IP、端口号、项目名称
js 获取请求网络协议.IP.端口号.项目名称 CreationTime--2018年6月19日15点54分 Author:Marydon /** * 获取url请求前缀 * @return ht ...
- 这是我见过最厉害的--智能代码生成器、html+js+底层+sql全都有、瓦特平台
1:直接上图.图片有点多.我就没全部上传了. (demo.使用方法.数据库bak)下载:http://pan.baidu.com/s/1ntE5bDn 起源: 之前有好多人问我代码生成器的源码.我发了 ...
- 基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘
计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测 ...
随机推荐
- 解决：TypeError: object() takes no parameters
运行测试用例时发现以下报错 Ran 1 test in 22.505s FAILED (errors=1) Error Traceback (most recent call last): File ...
- 【Hive】自定义函数
Hive的自定义函数无法满足实际业务的需要,所以为了扩展性,Hive官方提供了自定义函数来实现需要的业务场景. 1.定义 (1)udf(user defined function): 自定义函数,特 ...
- nginx结合tomcat一起使用
反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
- 使用 DocFX 生成 .Net/Unity项目文档
孙广东 2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX 类似JSDoc或Sphinx 如何使用看 : http: ...
- Go语言的序列化与反序列化（gob）
encoding/gob包实现了高效的序列化,特别是数据结构较复杂的,结构体.数组和切片都被支持. 实现代码如下://定义一个结构体type Student struct { Name string ...
- 【整理】石子合并问题（四边形不等式DP优化）
有很多种算法: 1,任意两堆可以合并:贪心+单调队列. 2,相邻两堆可合并:区间DP (O(n^3)) ). 3,相邻,四边形不等式优化DP (O(n^2) ). 4,相邻,GarsiaWach ...
- C++11新特性之线程操作
C++11之前没有对并发编程提供语言级别的支持,这使得我们在编写可移植的并发程序时,存在诸多的不便.现在C++11增加了线程以及线程相关的类,很方便地支持了并发编程,使得编写的多线程程序的可移植性得到 ...
- Django之mysql表单操作
在Django之ORM模型中总结过django下mysql表的创建操作,接下来总结mysql表记录操作,包括表记录的增.删.改.查. 1. 添加表记录 class UserInfo(models.Mo ...
- SSH框架(1)
一. SSH框架相关的面试题: 1. BeanFactory的作用是什么? [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依 ...
- Weex 解析（二）—— NativeBridge
(本篇幅主要讲解Weex 中iOS native与js交互实现) 大纲: weex 总框架预览 iOS NativeBridge总设计原理 一.weex 总框架预览 在写NativeBridge 总设 ...