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查看测 ...
随机推荐
- 利用大数据技术处理海量GPS数据
我秀中国物联网地图服务平台目前接入的监控车辆近百万辆,每天采集GPS数据7亿多条,产生日志文件70GB,使用传统的数据处理方式非常耗时. 比如,仅仅对GPS做一些简单的统计分析,程序就需要几个小时才能 ...
- Word批量设置表格宽度自动适应页面宽度
怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样. 当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者文档中有许多大大小小的表格,希 ...
- 禁用Browser Link
Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举. 前端代码是运行在浏览器中,而Visual Studio通常只会和 ...
- 转:Hive性能优化之ORC索引–Row Group Index vs Bloom Filter Index
之前的文章<更高的压缩比,更好的性能–使用ORC文件格式优化Hive>中介绍了Hive的ORC文件格式,它不但有着很高的压缩比,节省存储和计算资源之外,还通过一个内置的轻量级索引,提升查询 ...
- jsp中的session
浏览器和服务器的异常通话 常用方法 setAttribute(String key,Object value);//设置值 getAttribute(String key); //取值 Invalid ...
- JavaScript碎片
option option 元素定义下拉列表中的一个选项(一个条目). 浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示. ...
- 关于python模拟登录的一点实践
不久前,通过网上查阅各种资料,一直想利用python来实现模拟登录的功能,通过csdn汪海的博客学会了一点,但也只能算个皮毛,亦或皮毛都算不上. 边查阅资料边写一个小东西,起初想写一个程序,通过暴力破 ...
- 【前端】JavaScript入门学习
<button type="button" onclick="alert('hillo!')">Here</button> <sc ...
- [转载] FFMPEG之AVRational TimeBase成员理解
FFMPEG的很多结构中有AVRational time_base;这样的一个成员,它是AVRational结构的 typedef struct AVRational{ int num; /// ...
- 剑指Offer面试题：6.旋转数组中的最小数字
一 题目:旋转数组中的最小数字 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1, ...