Question

我将HTML表数据转换为折线图时遇到问题。

HTML CODE：

<input id="reader" type="button" class="btn btn-primary" value="Read data">
    <table id="hodnoty" border="1">
    <thead>
    <tr><th>Q.No.</th><th>T1</th><th>T2</th><th>T3</th><th>T4</th><th>T5</th><th>T6</th><th>T7</th><th>T8</th><th>T9</th><th>T10</th>
            <th>T11</th><th>T12</th><th>T13</th><th>T14</th><th>T15</th><th>T16</th><th>T17</th><th>T18</th><th>T19</th><th>T20</th>
            <th>T21</th><th>T22</th><th>T23</th><th>T24</th><th>T25</th><th>T26</th><th>T27</th><th>T28</th><th>T29</th><th>T30</th>
        </tr>
        </thead>
        <tbody id="refresh">

        </tbody>

JQUERY CODE：

var loop=0;
$('#reader').click(function(){
$('#refresh').append("<tr><td>"+loop+"</td><td>"+Value1.value+"</td>"+"<td>"+Value2.value+"</td>"+"<td>"+Value3.value+"</td>"+"<td>"+Value4.value+"</td>"+"<td>"+Value5.value+"</td>"+"<td>"+Value6.value+"</td>"+"<td>"+Value7.value+"</td>"+"<td>"+Value8.value+"</td>"+"<td>"+Value9.value+"</td>"+"<td>"+Value10.value+"</td>"+"<td>"+Value11.value+"</td>"+"<td>"+Value12.value+"</td>"+"<td>"+Value13.value+"</td>"+"<td>"+Value14.value+"</td>"+"<td>"+Value15.value+"</td>"+"<td>"+Value16.value+"</td>"+"<td>"+Value17.value+"</td>"+"<td>"+Value18.value+"</td>"+"<td>"+Value19.value+"</td>"+"<td>"+Value20.value+"</td>"+"<td>"+Value21.value+"</td>"+"<td>"+Value22.value+"</td>"+"<td>"+Value23.value+"</td>"+"<td>"+Value24.value+"</td>"+"<td>"+Value25.value+"</td>"+"<td>"+Value26.value+"</td>"+"<td>"+Value27.value+"</td>"+"<td>"+Value28.value+"</td>"+"<td>"+Value29.value+"</td>"+"<td>"+Value30.value+"</td></tr>");
    loop=loop+1;
});

当我点击按钮“读取数据”时，脚本从服务器读取实时数据，每次点击更新我的表格，我不知道如何从该表格中绘制折线图。

Answer 1

使用Highcharts，here即可

chart = function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable')
        },
        chart: {
            type: 'line'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });

更新

here is the full working example

Html表成线图

1 个答案: