从数据表中绘制图表

时间:2013-04-13 18:45:09

标签: javascript jquery datatable flot

我想从表中构建一个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>

谢谢!

1 个答案:

答案 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事件或类似事件。