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查看测 ...
随机推荐
- Android DDMS ADB启动失败错误解决！
ADB server didn't ACK && make sure the plugin is properly configured! adb启动失败一般是端口被占用! 解决方法和 ...
- C++（二十一） — 引用概念及本质
1.引用概念 引用是别名,必须在声明的时候初始化.即:是指一个已定义变量的别名.(一个内存空间,有两个名字都可以操作) 引用:在函数调用时,是变量的别名,不可以单独存在,使用时必须要初始化: 指针: ...
- Redis-sentinel哨兵模式集群方案配置
一.sentinel介绍 Redis Sentinel Sentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中 Sentinel作用: 1) ...
- 【SQL查询】模糊查询_like
[格式]:SELECT 字段 FROM 表 WHERE 某字段 Like 条件 [说明]: 1. %表示任意0个或多个字符,可匹配任意类型和长度的字符. 2. _ 表示任意单个字符.匹配单个任意字符. ...
- File I/O的总结
1读写字符文件 BufferedReader br=new BufferedReader(new FileReader("文件路径")); BufferedWriter bw=ne ...
- TF随笔-4
>>> import tensorflow as tf>>> a=tf.constant([[1,2],[3,4]])>>> b=tf.const ...
- Ganymed实现基本的自动化部署API
Ganymed SSH-2 for Java是一个纯Java实现的SHH2库,官网为http://www.ganymed.ethz.ch/ssh2/,最新的更新时间为2006年10月,在用之前,请仔细 ...
- 在ubuntu16.04上安装php7 mysql5.7 nginx1.10并支持http2
安装nginx 首先更新软件包 并且安装nginx sudo apt-get update sudo apt-get install nginx 开放防火墙配置 sudo ufw allow 'Ngi ...
- test20181219(期末考试)
Written with StackEdit. \(noip\)爆炸后就好久没考试了...结果今天又被抓去,感觉很慌啊... 考完了.过来填坑. T1 Description 使得\(x^x\)达到或 ...
- Pipeline处理Dataflow
Pipeline处理Dataflow https://www.cnblogs.com/CoderAyu/p/9757389.html .Net Core中利用TPL(任务并行库)构建Pipeline处 ...