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

Question

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

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

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

这是JS小提琴链接

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

在你原来的JFiddle中,你有一个<tr>太多了,所以你的图表显示但是已经坏了.删除此JFiddle的<tr>导致给出:

Uncaught Highcharts错误#14:www.highcharts.com/errors/14

发送到series.data的字符串值,预期的Number

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

不幸的是,Highcharts数据模块并不是我所知道的在线文档,但查看源代码为我们提供了相关选项:

table:String | HTMLElement

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

可以使用如下:

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

使用startRow: 1您可以手动设置标记表数据开始的行,如此JFiddle解决方案中所示.