1、新建一个web项目，在WebContent下新建一个Line.html；
Line.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 line2D = new FusionCharts( "script/FusionChart/DragLine.swf","line2DId", "1280", "560", "0");
line2D.setXMLUrl("line2D.xml");
line2D.render("line");
});
</script>
</head>
<body>
<div id="line"></div>
</body>
</html>
2、新建提供数据源的xml，line2D.xml；
line2D.xml：
<?xml version="1.0" encoding="UTF-8"?>
<chart palette="1" caption="某大学2000-2012部分学院人数统计" subcaption="统计学院人数"
showvalues="0" xAxisName="年份" yAxisName="人数"
restoreBtnBorderColor="A2A3A0" formBtnBorderColor="A2A3A0"
canvasPadding="20" dragBorderColor="666666" dragBorderThickness="3"
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="计算机学院" dragBorderColor="0099FF">
<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" dragBorderColor="CC9900">
<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" dragBorderColor="D1E78F">
<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>
3、运行：http://localhost:8080/jQuery/Line.html
（1）未做任何操作
（2）改变折线点数据
（3）点击“Restore”按钮，图形恢复到（1）
4、新建一个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、点击“Submit”按钮，会跳转到table.html页面
分享到：
相关推荐
C#绘制折线图 折线图是一种常用的数据可视化方法，用于展示数据的趋势和变化。C#提供了多种绘制折线图的方法，包括使用 Graphics 类、Bitmap 类和 Pen 类等。在本文中，我们将介绍如何使用 C# 绘制折线图，包括绘制...
在JavaScript（js）中实现折线图是一种常见的数据可视化需求，尤其在网页开发中，用于展示动态或静态的数据。折线图能够清晰地展现数据的变化趋势，帮助用户理解和分析数据。下面将详细介绍如何使用JavaScript来创建...
在PB中，自定义折线图是一项关键功能，它允许开发者根据特定需求创建具有个性化特性的图表，以便更好地可视化数据。本文将深入探讨PB自定义折线图的相关知识点，并通过分析"Graph2"这个文件来提供具体的实践指导。 ...
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
MPAndroidChart是一款强大的开源库，用于在Android平台上创建各种图表，包括折线图、柱状图、饼图等。这个"MPAndroidChart折线图Demo"是开发者分享的一个实例，帮助我们了解如何在Android应用中集成和使用...
折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制折线图绘制...
在Java的Swing环境中，JFreeChart库是一个强大的工具，用于创建各种图表，包括柱状图、折线图等。本教程将详细讲解如何利用JFreeChart在Swing应用程序中实现这些功能，以及如何在折线图中动态添加线。 首先，确保你...
在Java编程环境中，绘制折线图是一项常见的任务，特别是在数据分析、可视化或教学示例中。这个"java折线图绘制程序"是专为这个目的设计的，它允许开发者和用户轻松地创建和显示折线图，以便更好地理解和解释数据。 ...
在数据分析和可视化领域，折线图是一种非常常见且实用的图表类型，用于展示数据随时间变化的趋势或比较多个变量的变化情况。本主题将深入探讨如何实现一个简单的折线图，并探讨其可扩展性。 首先，我们需要理解折线...
在数据分析和可视化领域，折线图是一种非常常见且强大的工具，尤其在展示数据随时间变化的趋势时尤为适用。本文将针对R语言的新手和小白，详细介绍如何使用R语言绘制出美观且具有信息量的折线图。 首先，我们需要...
在Java Web开发中，JSP（JavaServer Pages）是一种用于创建动态网页的技术，而JFreeChart则是一个强大的Java图表库，能够帮助开发者生成各种复杂的图表，包括折线图。本教程将详细介绍如何在JSP中利用JFreeChart库来...
"jq报表折线图"这个功能模块显然聚焦于利用jQuery（jq）库来实现动态和交互式的报表，特别是折线图这一图表类型。以下是关于这个主题的详细解释： **jQuery（jq）库** jQuery是一个轻量级的JavaScript库，它简化了...
"Draw图表(折线图)"这个压缩包文件很可能是包含了一个用于创建和展示折线图的软件或代码示例，方便用户直接使用或学习。 折线图是通过将数据点用线条连接起来形成的图形，这些数据点通常代表不同时间点上的数值。它...
在Android开发中，折线图是一种常见的数据可视化方式，它能直观地展示数据的变化趋势。本文将详细讲解如何使用Android Studio来实现一个折线图。 首先，你需要选择一个图形库来帮助绘制折线图。在Android社区中，有...
自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、饼状图的类自绘折线图、柱状图、...
初始显示通常会根据预设的数据生成静态的折线图，让用户对数据有一个初步的认识。 2. **子程序_折线显示**：此子程序主要用于根据新的数据动态更新折线图。在实际应用中，数据可能随着时间的推移不断变化，例如股票...
MPAndroidChart是一个强大的开源库，它允许开发者轻松地创建各种图表，包括折线图。本篇将深入探讨如何利用MPAndroidChart实现多条数据的实时动态更新，并控制折线图上数据的精度。 首先，我们需要了解...
在ASP中生成折线图是常见的数据可视化需求，这通常涉及到JavaScript图表库或者服务器端组件的使用。下面将详细探讨如何在ASP中实现折线图的生成。 一、原理介绍 ASP生成折线图的基本流程通常是：在服务器端处理数据...
在多点显示模式下，程序会连接所有点以形成连续的折线。这只需要在遍历数据时，每次调用LineTo()时都使用上一个点作为起点，直到遍历完整个数据集。 为了提供良好的用户体验，程序还应该包括一些基本的用户界面元素...