我想从表中构建一个flot图表。该表是使用jquery datatables插件构建的。该表可以内联编辑。
我想知道是否有人有任何提示在flot中显示数据。你会从json或直接从图表中提取数据来构建flot图表吗?
使用datatables jquery插件动态填充数据。
表格看起来像这样..
<div id="plotarea">
<table>
<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
<tr>
<td></td>
<th scope="col">2003</th>
<th scope="col">2002</th>
<th scope="col">2001</th>
<th scope="col">2000</th>
<th scope="col">1999</th>
<th scope="col">1998</th>
</tr>
<tr>
<th scope="row">USA</th>
<td>10,882</td>
<td>10,383</td>
<td>10,020</td>
<td>9,762</td>
<td>9,213</td>
<td>8,720</td>
</tr>
<tr>
<th scope="row">EU</th>
<td>10,970</td>
<td>9,040</td>
<td>8,303</td>
<td>8,234</td>
<td>8,901</td>
<td>8,889</td>
</tr>
</table>
</div>
谢谢!
答案 0 :(得分:1)
您可以使用循环遍历表并为flot构建数据数组。像这样:
var headerTr = $('table tr:first()');
var rowCount = $('table tr').length - 1;
var data = [];
for (var row = 0; row < rowCount; row++) {
var tr = $('table tr').eq(row + 1);
var dataseries = {
label: tr.find('th').text(),
data: []
};
for (var col = 0; col < tr.find('td').length; col++) {
var xval = headerTr.find('th').eq(col).text();
var yval = tr.find('td').eq(col).text().replace(',', '');
dataseries.data.push([xval, yval]);
}
data.push(dataseries);
};
这是一个带有工作示例的fiddle。通过按钮单击启动绘图。对于您的数据表,您可以将其更改为onchange
事件或类似事件。