Question

我正在使用从HTML表格中提取数据的高图表栏栏，但我想为其添加标题。我在HTML中添加的代码无效。

问题是我添加标题代码时没有显示图表：

    <tr>
      <th COLSPAN='100%'>
         <h3>TITLE</h3>
      </th>
    </tr>

Here is the JS fiddle link

HTML：

    400px; margin: 0 auto"></div>

    <table id="datatable">
        <thead>
            <tr>
                  <th COLSPAN='100%'>
                     <h3>TITLE</h3>
                  </th>
                </tr>
            <tr>
            <tr>
                <th></th>
                <th>Jane</th>
                <th>John</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Apples</th>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <th>Pears</th>
                <td>2</td>
                <td>0</td>
            </tr>
            <tr>
                <th>Plums</th>
                <td>5</td>
                <td>11</td>
            </tr>
            <tr>
                <th>Bananas</th>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <th>Oranges</th>
                <td>2</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

JS：

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

Answer 1

在您的original JFiddle中，您有一个<tr>太多，所以您的图表显示但已损坏。将<tr>导致this JFiddle删除为{/ 3>}

Uncaught Highcharts错误＃14：www.highcharts.com/errors/14

发送到series.data的字符串值，预期数量

这是因为您在<thead>内的表格中使用了两行。 Highcharts数据模块期望只有一个标题行。如果您仔细观察，可以使用控制台看到它在上面的错误被抛出时尝试创建一个值为["Jane", 3, 2, 5, 1, 2]的系列。

不幸的是，Highcharts数据模块并不是我所知道的在线文档，但looking at the source code为我们提供了相关选项：

table：String | HTMLElement

HTML表或要解析为输入数据的id。相关选项ara startRow，   endRow，startColumn和endColumn用于界定表的哪个部分使用。

可以使用如下：

data: {
    table: document.getElementById('datatable'),
    startRow: 1
}

使用startRow: 1，您可以手动设置标记表格数据开头的行，如this JFiddle solution中所示。

Highcharts从带有标题的HTML表中加载数据

1 个答案: