1、新建web项目，布局结构如下图：
FusionChart中的文件结构如下：
2、在WebContent下新建column.html;
column.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionChart实现可变柱形图</title>
<script type="text/javascript" src="script/FusionChart/FusionCharts.js"></script>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
body{
width:100%;
height: 100%;
font-size:12px;
}
#column{
width:100%;
height: 100%;
font-size:12px;
}
</style>
<script type="text/javascript">
$(function(){
var column2D = new FusionCharts( "script/FusionChart/DragColumn2D.swf","column2DId", "1280", "560", "0");
column2D.setXMLUrl("column2D.xml");
column2D.render("column");
});
</script>
</head>
<body>
<div id="column"></div>
</body>
</html>
3、新建提供数据源的XML文件，column2D.xml；
column2D.xml：
<?xml version="1.0" encoding="UTF-8"?>
<chart palette="2" caption="某大学2000-2012部分学院人数统计" subcaption="统计学院人数" showvalues="0" xAxisName="年份" yAxisName="人数"
restoreBtnBorderColor="A2A3A0" formBtnBorderColor="A2A3A0"
formAction="table.html" baseFontSize="12">
<categories>
<category name="2000"/>
<category name="2001"/>
<category name="2002"/>
<category name="2003"/>
<category name="2004"/>
<category name="2005"/>
<category name="2006"/>
<category name="2007"/>
<category name="2008"/>
<category name="2009"/>
<category name="2010"/>
<category name="2011"/>
<category name="2012"/>
</categories>
<dataset id="IT" seriesName="计算机学院">
<set id="IT2000" value="25601" allowDrag="0"/>
<set id="IT2001" value="20148" allowDrag="0"/>
<set id="IT2002" value="17372" dashed="1"/>
<set id="IT2003" value="35407" dashed="1"/>
<set id="IT2004" value="38105" dashed="1"/>
<set id="IT2005" value="25601" allowDrag="0"/>
<set id="IT2006" value="20148" allowDrag="0"/>
<set id="IT2007" value="17372" dashed="1"/>
<set id="IT2008" value="35407" dashed="1"/>
<set id="IT2009" value="38105" dashed="1"/>
<set id="IT2010" value="35407" dashed="1"/>
<set id="IT2011" value="38105" dashed="1"/>
<set id="IT2012" value="56894" dashed="1"/>
</dataset>
<dataset id="EN" seriesName="外国语学院" showValues="0">
<set id="EN2000" value="27400" allowDrag="0"/>
<set id="EN2001" value="57401" allowDrag="0"/>
<set id="EN2002" value="41941" allowDrag="0"/>
<set id="EN2003" value="45263" dashed="1"/>
<set id="EN2004" value="117320" dashed="1"/>
<set id="EN2005" value="114845" dashed="1"/>
<set id="EN2006" value="57401" allowDrag="0"/>
<set id="EN2007" value="41941" allowDrag="0"/>
<set id="EN2008" value="45263" dashed="1"/>
<set id="EN2009" value="117320" dashed="1"/>
<set id="EN2010" value="114845" dashed="1"/>
<set id="EN2011" value="117320" dashed="1"/>
<set id="EN2012" value="114845" dashed="1"/>
</dataset>
<dataset id="WL" seriesName="物流学院" showValues="0">
<set id="WL2000" value="45000" allowDrag="0"/>
<set id="WL2001" value="44835" allowDrag="0"/>
<set id="WL2002" value="18722" dashed="1"/>
<set id="WL2003" value="77557" dashed="1"/>
<set id="WL2004" value="92633" dashed="1"/>
<set id="WL2005" value="45000" allowDrag="0"/>
<set id="WL2006" value="44835" allowDrag="0"/>
<set id="WL2007" value="18722" dashed="1"/>
<set id="WL2008" value="77557" dashed="1"/>
<set id="WL2009" value="92633" dashed="1"/>
<set id="WL2010" value="77557" dashed="1"/>
<set id="WL2011" value="92633" dashed="1"/>
<set id="WL2012" value="42633" dashed="1"/>
</dataset>
</chart>
4、新建xml中formAction跳转页面，table.html；
table.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>某大学2000-2012部分学院人数统计</title>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
body{
width:100%;
height:100%;
font-size:12px;
text-align: center;
}
table {
width:80%;
height:100%;
border: 1px solid #CCCCCC;
}
.tr_odd
{
background: #EBF2FE;
}
.tr_even
{
background: #B4CDE6;
}
</style>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("tr_odd");
$("tr:even").addClass("tr_even");
});
</script>
</head>
<body>
<table>
<tr style="background: #CCCCCC;">
<th>年份</th>
<th>计算机学院</th>
<th>外国语学院</th>
<th>物流学院</th>
</tr>
<tr>
<td>2000</td>
<td>25601</td>
<td>27400</td>
<td>45000</td>
</tr>
<tr>
<td>2001</td>
<td>20148</td>
<td>57401</td>
<td>44835</td>
</tr>
<tr>
<td>2002</td>
<td>17372</td>
<td>41941</td>
<td>18722</td>
</tr>
<tr>
<td>2003</td>
<td>35407</td>
<td>45263</td>
<td>77557</td>
</tr>
<tr>
<td>2004</td>
<td>38105</td>
<td>117320</td>
<td>92633</td>
</tr>
<tr>
<td>2005</td>
<td>25601</td>
<td>114845</td>
<td>45000</td>
</tr>
<tr>
<td>2006</td>
<td>20148</td>
<td>57401</td>
<td>44835</td>
</tr>
<tr>
<td>2007</td>
<td>17372</td>
<td>41941</td>
<td>18722</td>
</tr>
<tr>
<td>2008</td>
<td>35407</td>
<td>45263</td>
<td>77557</td>
</tr>
<tr>
<td>2009</td>
<td>38105</td>
<td>117320</td>
<td>92633</td>
</tr>
<tr>
<td>2010</td>
<td>35407</td>
<td>114845</td>
<td>77557</td>
</tr>
<tr>
<td>2011</td>
<td>38105</td>
<td>117320</td>
<td>92633</td>
</tr>
<tr>
<td>2012</td>
<td>56894</td>
<td>114845</td>
<td>42633</td>
</tr>
</table>
</body>
</html>
5、运行项目：http://localhost:8080/jQuery/column.html，结果如下图：
（1）为点击任何键时
（2）通过鼠标改变虚线柱形图值后，显示的结果如下图
（3）点击“Restore”后，结果回复最初的数据图形
（4）点击“Submit”提交后，页面跳转到table.html（http://localhost:8080/jQuery/table.html）
分享到：
相关推荐
Java 使用 JFreeChart 创建柱形图是一种常见的数据可视化方法，尤其在数据分析和Web应用程序中。JFreeChart 是一个强大的开源库，它提供了多种图表类型，包括柱形图、饼图、线图等，使得开发者能够方便地将数据转化...
在Excel中，柱形图是一种常见的数据可视化工具，它能够帮助我们直观地比较不同类别或时间段的数据量。柱形图的每个柱子代表一个类别，柱子的高度则表示该类别的数值大小。在这个名为"Excel柱形图.rar"的压缩包中，...
`bar`函数会自动根据`categories`的长度对柱形进行定位。 在MATLAB中，还可以调整柱形的颜色、宽度、透明度等属性，以及添加图例、网格线、标题和轴标签。例如，我们可以设置柱形为蓝色，并增加一些视觉效果： ```...
"柱形图折线图组合PPT素材.pptx" 作为一份PPT图表资源，柱形图折线图组合PPT素材.pptx为用户提供了一个清晰直观的数据可视化解决方案。下面将对该资源进行详细的知识点分析： 一、数据可视化 数据可视化是指使用...
在IT领域，尤其是在数据可视化和图形用户界面设计中，柱形图是一种常用的数据表示方法。本文将详细讨论如何使用C++编程语言，在Visual Studio 2008环境下创建一个简单的柱形图，并通过定时器来动态地添加或删除数据...
本文将深入探讨“金光ASP柱形图”这一主题，它涉及到如何在ASP环境中创建和展示柱状图，这对于数据分析和可视化至关重要。 柱形图是一种常用的数据可视化工具，它通过长条的高度来表示数据的大小或数量。在ASP中...
2. **创建新图形**：点击“图形模板库”按钮，选择适合的柱形图类型，如简单柱形图、堆积柱形图、百分比堆积柱形图等。 3. **设置数据列**：在弹出的对话框中，指定哪些数据列将用于X轴（分类）和Y轴（值）。你可以...
开发者通常会用SQL查询语句从ACCESS数据库中提取所需数据，然后将这些数据传递给ASP脚本生成柱形图。 生成柱形图的过程可能包括以下步骤： 1. 连接数据库：使用ADO（ActiveX Data Objects）库，创建数据库连接对象...
本示例程序聚焦于四种常见的图表类型：竖柱形图、横柱形图、条形图（线形图）以及饼状图，全部基于Flash技术实现。以下是关于这些图表类型及其在Flash中的应用的详细解释。 1. **竖柱形图**：竖柱形图是一种常见的...
在数据分析和可视化领域，柱形图是一种常用的图表类型，它能直观地展示各类别数据的大小。当柱形图结合了渐变色效果时，不仅可以增强视觉吸引力，还能更有效地传达数据间的差异和趋势。本篇文章将深入探讨如何创建带...
- 实现动态柱形图，开发者可能会使用一些现有的图表库，如Chart.js、Google Charts或Highcharts等。这些库提供了丰富的图形选项和API，方便在ASP页面中集成和定制柱形图。 7. **页面布局与交互**： - ASP页面除了...
在Excel 2016中，柱形图和条形图是两种常用的数据可视化工具，它们可以帮助用户清晰地展示和比较各类数据。这两种图表类型在分析业务数据、统计数据或者进行项目报告时尤其常见。 首先，我们来看柱形图。柱形图通过...
如果你使用QML，创建柱形图的代码会更简洁： ```qml import QtCharts 2.12 ChartView { id: chartView width: parent.width; height: parent.height antialiasing: true BarSeries { id: barSeries ...
柱形图、饼图、线形图和区域图都是最常见的图表类型，它们各自适用于不同的数据展示场景。本篇将详细介绍这些图表以及如何利用JavaScript库Highcharts来创建它们。 1. **柱形图（Bar Chart）**： 柱形图是一种用...
C#.NET 画图(走势图,柱形图
【标题】"一个柱形图组件，效果不错!" 指的是一个用于数据可视化的柱状图组件。在IT行业中，柱形图是一种常见的图表类型，用于比较不同类别的数值。这种组件通常由一系列垂直或水平的柱子组成，每个柱子的高度表示...
"制作柱形图折线图软件"是一款专注于生成这两种基础图表的工具。柱形图和折线图广泛应用于商业报告、科学研究以及日常数据分析中，它们能够清晰地展现数据的分布、趋势和比较。 首先，柱形图是一种用长条的长度表示...
柱形图_labview柱状图_labview柱状图"是一个关于使用Labview创建柱状图的项目，主要关注的是数据的可视化表示，这对于数据分析和结果展示至关重要。 柱状图是一种常用的数据表示方式，它通过长条的高度来显示各个...
EXCEL报表柱形图-15-多段组合柱形图Excel图表.xlsx