visualize.jQuery.js有自带的方法,自动获取table的数据显示在柱状图上边
时间: 2024-03-11 11:49:04 浏览: 90
jQuery获取Table某列的值(推荐)
是的,visualize.jQuery.js 库提供了一个 `parseData()` 方法,可以自动从 HTML 表格中获取数据并将其转换为可用于柱状图的格式。
HTML 代码:
```html
<table id="myTable">
<thead>
<tr>
<th>Year</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>2010</td>
<td>20</td>
</tr>
<tr>
<td>2011</td>
<td>35</td>
</tr>
<tr>
<td>2012</td>
<td>50</td>
</tr>
<tr>
<td>2013</td>
<td>70</td>
</tr>
<tr>
<td>2014</td>
<td>90</td>
</tr>
</tbody>
</table>
<div id="chart"></div>
```
JavaScript 代码:
```javascript
$(document).ready(function() {
// 解析表格数据
var data = $('#myTable').parseData()[0];
// 绘制柱状图
$('#chart').visualize({
type: 'bar',
data: data,
title: 'My Bar Chart',
colors: ['#6FB8CC', '#DADADA'],
width: 500,
height: 300,
barGroupMargin: 10,
barMargin: 5,
xAxisLabel: 'Year',
yAxisLabel: 'Value'
});
});
```
在这个例子中,我们使用 `parseData()` 方法从 HTML 表格中获取数据,并将其转换为可用于柱状图的格式。然后,我们使用 `visualize()` 函数将数据绘制成柱状图,并将其呈现在页面上的 `div` 元素中,它的 ID 是 `chart`。您可以根据需要修改选项,如标题、颜色、宽度、高度和轴标签。
阅读全文