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

我正在使用high charts列栏从HTML表中提取数据，但我想给它添加一个标题。我在HTML中添加的代码不起作用

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

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

标题

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>    

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

400px；页边距：0自动“>
标题
简
约翰
苹果
3.
4.
梨
2.
0
李子
5.
11
香蕉
1.
1.
橘子
2.
4.

JS:

    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>    

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

$（函数（）{
$（“#容器”）。高图({
数据：{
表：document.getElementById（'datatable'）
},
图表：{
类型：“列”
},
标题：{
text:“从页面中的HTML表提取的数据”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“单位”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.point.y+''+this.point.name.toLowerCase（）；
}
}
});
});

在您的中，您的一个

太多了，因此您的图形正在显示，但已损坏。删除

会导致出现以下问题：

未捕获的海图错误#14：

发送到series.data的字符串值，应为数字

这是因为您在

中的表中使用了两行。Highcharts数据模块希望只有一行标题。如果您仔细查看，您可以使用控制台看到，当抛出上述错误时，它会尝试创建一个值为

[“Jane”，3，2，5，1，2]

的序列

不幸的是，据我所知，Highcharts数据模块的在线文档记录并不完善，但它为我们提供了相关选项：

表：字符串| HTMLElement

要作为输入数据解析的HTML表或其id。相关选项ara startRow， endRow、startColumn和endColumn来限定使用表的哪一部分

可按如下方式使用：

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

使用

startRow:1

可以手动设置标记表格数据开始的行，如中所示。

在中，您的一个

太多，因此图形正在显示，但已损坏。删除

会导致出现以下错误：

未捕获的海图错误#14：

发送到series.data的字符串值，应为数字

这是因为您在

中的表中使用了两行。Highcharts数据模块希望只有一行标题。如果您仔细查看，您可以使用控制台看到，当抛出上述错误时，它会尝试创建一个值为

[“Jane”，3，2，5，1，2]

的序列

不幸的是，据我所知，Highcharts数据模块的在线文档记录并不完善，但它为我们提供了相关选项：

表：字符串| HTMLElement

要作为输入数据解析的HTML表或其id。相关选项ara startRow， endRow、startColumn和endColumn来限定使用表的哪一部分

可按如下方式使用：

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

---

使用

startRow:1

您可以手动设置标记表格数据开始的行，如中所示。

看起来HTML的第一部分被切断了。谢谢。但您也可以转到js FIDLE链接。它包含所有代码。它可能只是我正在使用的浏览器（Chrome），但是你的Fiddle没有为我显示图形？我知道。这就是问题所在。它不起作用。在这里，去掉html文件标题中的代码，它会像html的第一部分被切断一样工作。谢谢。但是你也可以转到js Fiddle链接。它有所有的代码。它可能只是我正在使用的浏览器（Chrome），但是你的提琴没有为我显示图表？我知道。这就是问题所在。它不起作用。在这里，去掉html文件标题中的代码，如果我可以多次向上投票，它就会起作用。回答很好。太棒了！有什么想法为什么这个图表不起作用吗渲染？如果我能多次向上投票，我只会尝试使用第1列、第3列和第4列。回答很好。太棒了！你知道为什么这个图表不会渲染吗？我只会尝试使用第1列、第3列和第4列