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查看测 ...
随机推荐
- 六 web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求
利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode("utf-8")将字节转化成字符串 ...
- zend studio 添加xdebug调试php代码
1.Eclipse下对于大部分语言都提供了调试器接口,自然的对于PHP,Zend已经集成了XDebug调试器,找到Zend中的Preferences->PHP->Debug, 将调试器设置 ...
- maven 其他远程仓库配置
在平时的开发中,我们往往不会使用默认的中央仓库,默认的中央仓库访问的速度比较慢,访问的人或许很多,有时候也无法满足我们项目的需求,可能项目需要的某些构件中央仓库中是没有的,而在其他远程仓库中有,如JB ...
- CPU高获取其线程ID然后分析
一.具体步骤 shift+p 按照cpu排序 shift+m按照内存排序 1.查看进程下所有线程 top -H -p pid 2.将十进制数换成16进制:print "%x/n" ...
- 转:大数据架构：flume-ng+Kafka+Storm+HDFS 实时系统组合
虽然比较久,但是这套架构已经很成熟了,记录一下 一般数据流向,从“数据采集--数据接入--流失计算--数据输出/存储”<ignore_js_op> 1).数据采集 负责从各节点上实时采集数 ...
- 013对象—— __clone __toString __call
<?php /** * */ //__clone()方法对一个对象实例进行的浅复制,对象内的基本数值类型进行的是传值复制 /*class a { public $uname; public $n ...
- Android平台下渗透测试工具大集合
Android平台下渗透测试工具大集合 分享一个google的项目,各种Android下的渗透测试工具. Ad Network Detector (1.2): http://market.androi ...
- Python探索记(18)——文件File
# @Time : 2017/7/8 21:10 # @Author : 原创作者:谷哥的小弟 # @Site : 博客地址:http://blog.csdn.net/lfdfhl # @DESC : ...
- Android数据读取之Sqlite数据库操作
咱们书接上文,继续来说说Android数据读取,这回,我们要讲的是Sqlite数据库的相关操作.以一个实例开始吧: 首先,上图,看看做成后的效果: 大概描述:类似于浏览器的收藏夹,网站名称,网站地址, ...
- Python 字符串相似性的几种度量方法
字符串的相似性比较应用场合很多,像拼写纠错.文本去重.上下文相似性等. 评价字符串相似度最常见的办法就是:把一个字符串通过插入.删除或替换这样的编辑操作,变成另外一个字符串,所需要的最少编辑次数,这种 ...