数据表中的图表 [英] Flot Chart from Data Table

问题描述

我想从表格中建立一个浮动图表。该表是使用jquery datatables插件构建的。该表可以内联编辑。

我想知道有没有人有任何提示来显示数据。你可以从json或直接从图表中提取数据，以构建这个图表吗？

使用数据库jquery插件动态地填充数据。

表格看起来像这样..

 < div id =plotarea> ; 
< table> 
< caption> GDP，根据汇率，随着时间的推移。价值十亿美元。< / 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> 
  

谢谢！

解决方案

您可以使用循环来遍历表，并构建数据数组以进行填充。这样做：

  var headerTr = $（'table tr：first（）'）; 
 var rowCount = $（'table tr'）。length  -  1; 
 var data = []; （var row = 0; row< rowCount; row ++）{
 var tr = $（'table tr'）。eq（row + 1）; 
 
 
 var dataseries = {
 label：tr.find（'th'）。text（），
 data：[] 
}; 
（var col = 0; col< tr.find（'td'）。length; col ++）{
 var xval = headerTr.find（'th'）。eq （）; 
 var yval = tr.find（'td'）。eq（col）.text（）。replace（'，'，''）; 
 dataseries.data.push（[xval，yval]）; 
} 
 data.push（dataseries）; 
}; 
  

这是一个小提琴有一个工作的例子。按钮点击开始绘图。对于您的数据表，您可以将其更改为 onchange 事件或类似的事件。

I want to build a flot chart from a table. The table is built using the jquery datatables plugin. The table can be edited inline.

I was wondering if anyone had any tips to display the data in flot. Would you pull the data from json or directly from the chart to build the flot chart?

The data is populated in dynamically using the datatables jquery plugin.

The table looks like this..

<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>

Thanks!

解决方案

You can use loops to go through your table and build the data array for flot. Something like this:

    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);
    };

Here is a fiddle with a working example. The drawing is started by button click. For your datatables you could change that to an onchange event or something similar.

这篇关于数据表中的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！