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查看测 ...
随机推荐
- oracle：与mysql相似得find_set_in函数用法
Oracle中实现find_in_set CREATEORREPLACEFUNCTION FIND_IN_SET(piv_str1 varchar2, piv_str2 varchar2, p_sep ...
- Linux命令详解-ls
Ls(list)命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单.通过ls 命令不仅可以查 ...
- time模块详解
本文转自这里: 在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: 在Python中,通常有 ...
- Django框架(二)
一:Django项目创建步骤: 方式1:命令创建: 进入指定目录 C:\Users\bing>F: F:\>cd mysite F:\mysite>django-admin star ...
- FLASH动作脚本详解
FLASH动作脚本详解 一.FLASH脚本基础入门讲解 二.按钮AS的编写 三.影片剪辑的AS编写 四.动态文本框 五.影片剪辑的拖拽 六.流程控制与循环语句 七.绘图及颜色的AS的编写 八.声音 A ...
- js 取任意两个数之间的随机整数
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Mat ...
- lzugis—搭建属于自己的小型的版本控制SVN
对于不了解SVN的同志们可以参考下"mh942408056"的这篇博文,SVN简介,链接地址为:http://blog.csdn.net/mh942408056/article/d ...
- C51 一个非常有用的位操作 --- 其中一位置 0 其它位不变
C51 一个非常有用的位操作 --- 其中一位置 0 其它不变 C51 中经常操作位,以下方法就非常方便,来自 1 s &= ~(1 << j) /* 将变量s的第j位置成0,其余 ...
- spark-shell与scala生成parquet文件
spark-shell用户 spark-shell只能spark用户来进行初始化,如果用hdfs或者root将会卡在spark-shell的初始化那个地方.可以用这两个用户来验证spark安装时成功地 ...
- numpy之统计函数和布尔数组方法
统计函数 可以通过numpy的统计函数对整个数组或者某个轴向的数据进项统计计算. 所谓的轴向,其实就是n维向量的某一维.或者说某一行,某一列. sum对数组(向量)中全部或某个轴向的元素求和,长度为0 ...