必须引入的包：
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.flot.js"></script>
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.graphTable-0.2.js"></script>
<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/excanvas.js"></script>
<script type="text/javascript" src="<%=host%>/js/jquery-1.4.3.min.js"></script>
以下是jsp 例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="/ceshi/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/ceshi/js/jquery.flot.js"></script>
<script type="text/javascript" src="/ceshi/js/jquery.graphTable-0.2.js"></script>
<script type="text/javascript" src="/ceshi/js/excanvas.js"></script>
<style>
body {
font-family:Arial;
}
div.flot-graph {
margin:20px 0;
}
p {
padding:4px 2px;
background-color:#eee;
border:1px solid #ccc;
font-family:Courier;
}
table {
text-align:center;
}
table caption {
text-align:left;
font-weight:bold;
margin:20px 0 0 0;
}
</style>
</head>
<body>
<table border="1" cellpadding="2" id="table1" width="500">
<thead>
<caption>Table 1: Graph by columns</caption>
<tr>
<th></th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th>2</th>
<td>20</td>
<td>40</td>
<td>60</td>
</tr>
<tr>
<th>3</th>
<td>40</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
</table>
<p>$('#table1').graphTable({series: 'columns'});</p>
<input type="submit" onclick="$('#table1').graphTable({series: 'columns'}); $(this).remove();" value="go" />
<table border="1" cellpadding="2" id="table2" width="500">
<thead>
<caption>Table 2: Graph by rows</caption>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th>row2</th>
<td>20</td>
<td>40</td>
<td>60</td>
</tr>
<tr>
<th>row3</th>
<td>40</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
</table>
<p>$('#table2').graphTable({series: 'rows'});</p>
<input type="submit" onclick="$('#table2').graphTable({series: 'rows'}); $(this).remove();" value="go" />
<table border="1" cellpadding="2" id="table3" width="500">
<thead>
<caption>Table 3: Graph by rows, replace currency symbol</caption>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>row1</th>
<td>$10</td>
<td>$20</td>
<td>$30</td>
</tr>
<tr>
<th>row2</th>
<td>$20</td>
<td>$40</td>
<td>$60</td>
</tr>
<tr>
<th>row3</th>
<td>$40</td>
<td>$80</td>
<td>$120</td>
</tr>
</tbody>
</table>
<p>$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } });</p>
<input type="submit" onclick="$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } }); $(this).remove();" value="go" />
</body>
</html>
分享到：
相关推荐
**Flot** 是一个基于 JavaScript 的开源库，用于在网页上绘制高质量的图形。它主要利用 HTML5 的 `<canvas>` 元素进行渲染，能够创建各种图表，...在实际项目中，结合具体的业务需求，Flot 将成为强大的可视化工具。
本示例将聚焦于如何利用Flot动态地读取数据并生成图形，以及如何通过配置文件控制图形的类型。 首先，Flot是jQuery的一个插件，它提供了丰富的选项来定制图表的外观和行为。要使用Flot，你需要在项目中引入jQuery和...
在这个“Query中Flot的经典例子”中，我们将深入探讨这两个工具如何协同工作，创建出引人入胜的数据展示。 首先，让我们从jQuery开始。jQuery的核心理念是“Write Less, Do More”，它的API设计简洁且易于理解。...
3. **创建容器**：在HTML中设置一个div元素作为图表的容器。 4. **编写JavaScript代码**：初始化图表，设置选项，然后将数据传递给Flot进行渲染。 5. **自定义和扩展**：根据需要调整图表样式，或者利用插件增加更...
jQuery Flot 0.5 是一个基于 JavaScript 的数据可视化库，它使得在 HTML 页面上创建图形变得更加简单且直观。这个库特别适用于那些希望通过纯 JavaScript 实现动态和交互式图表的开发者。Flot 0.5 版本是该库的一个...
jQuery Flot 是一个用于在网页上绘制高质量图形的开源库，它基于 jQuery，因此易于集成到任何使用 jQuery 的项目中。这个库提供了丰富的选项和插件，可以创建出各种各样的图表，包括折线图、柱状图、饼图等。在本文...
Flot的基本使用非常直观，首先需要在HTML文件中引入jQuery库和Flot库的JavaScript文件。然后，你可以通过JavaScript代码创建一个图表容器，并提供数据来绘制图表。例如： ```html ;height:300px;"> ``` ```...
在实际应用中，首先需要在HTML文件中引入Flot库和flot.tooltip.js插件文件。接着，在JavaScript代码中，创建Flot图表的同时，配置flot.tooltip的相关参数。例如，你可以设置工具提示的背景颜色、字体大小，或者指定...
3. **创建容器**：在HTML中设置一个用于显示图表的div元素，并指定相应的ID。 4. **配置选项**：根据需求设置图表的配置选项，如颜色、宽度、网格线等。 5. **绘制图表**：使用jQuery选择器找到div元素，然后调用...
### Flot 0.8.3 更新内容 Flot 0.8.3 版本可能包含以下改进和修复： - **性能提升**：可能对内部算法进行了优化，使得渲染速度更快，特别是在大数据集的情况下。 - **API 改进**：可能对公共 API 进行了调整，增加...
`jQuery Flot` 是一个基于 jQuery 的开源图表库，它允许开发者轻松地在网页上创建出各种复杂的图形，包括折线图、柱状图、饼图等。在本实例中，我们将关注如何使用 `jQuery Flot` 实现实时更新的折线图。实时更新的...
在本文中，我们将深入探讨Flot的核心特性、使用方法、API接口以及其在实际项目中的应用。 首先，Flot的主要优势在于其与jQuery的无缝集成。jQuery作为一个强大的JavaScript库，简化了DOM操作、事件处理、Ajax交互等...
标题“flot的一些类的集合”表明我们将探讨 Flot 库中的一些关键类和它们的功能。描述提到“flot jquerUI的一系列的集合”，虽然 Flot 并不直接与 jQuery UI 关联，但我们可以理解为它是与 jQuery 框架紧密配合使用...
FlashVML 是一个基于 Flash 的矢量图形库，它模仿了 VML（Vector Markup Language）的接口，使 Flot 能够在这些环境中正常工作。尽管现代浏览器已经广泛支持 canvas，但 FlashVML 仍然是 Flot 向后兼容的一个关键...
1. **初始化容器**：在HTML中设置一个div元素作为图表的容器。 2. **准备数据**：将数据结构化为Flot接受的格式。 3. **设置选项**：根据需求配置图表的各种属性，如颜色、网格、图例等。 4. **绘制图表**：使用$....
- **创建容器**：在HTML中设置一个div元素作为图表的容器。 - **绘制图表**：使用jQuery选择器找到容器，然后调用$.plot()方法，传入数据和配置选项来创建图表。 4. **实例源码分析** 压缩包中的"flot"文件可能...
在IT领域，尤其是在Web开发中，数据可视化是一个关键部分，用于将复杂的数据以直观的方式呈现给用户。在jQuery生态系统中，有多个图表插件可供选择，例如Highcharts、jsCharts和Flot。这三个插件都是JavaScript库，...
3. **定义容器**：在HTML中创建一个`div`元素作为图表的容器。 4. **配置选项**：设置图表的样式、颜色、坐标轴范围等属性，通过JavaScript对象来完成。 5. **绘制图表**：调用Flot的`$.plot()`函数，传入数据、...