如何从饼图（highchart）中的html表中获取文本？答案

【问题标题】：How to get text from html table in pie chart (highchart)?如何从饼图（highchart）中的html表中获取文本？
【发布时间】：2013-01-09 09:28:51
【问题描述】：

我正在将数据从 html 表显示到饼图 (HighChart)。我想显示表标签的<th>..</th> 标签之间的文本。但不是文本 .. 它显示 slice ... slice .. slice 任何地方的分区。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pie Charts</title>
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script>
        $(function () 
        {
            // On document ready, call visualize on the datatable.
            $(document).ready(function () 
            {
                /**
                * Visualize an HTML table using Highcharts. The top (horizontal) header
                * is used for series names, and the left (vertical) header is used
                * for category names. This function is based on jQuery.
                * @param {Object} table The reference to the HTML table to visualize
                * @param {Object} options Highcharts options
                */
                Highcharts.visualize = function (table, options) 
                {
                    // the categories
                    options.xAxis.categories = [];
                    $('tbody th', table).each(function (i) 
                    {
                        options.xAxis.categories.push(this.innerHTML);
                    });

                    // the data series
                    options.series = [];
                    $('tr', table).each(function (i) 
                    {
                        var tr = this;
                        $('th, td', tr).each(function (j) 
                        {
                            if (j > 0) { // skip first column
                                if (i == 0) 
                                { // get the name and init the series
                                    options.series[j - 1] = 
                                    {
                                        name: this.innerHTML,
                                        data: []
                                    };
                                }
                                else 
                                { // add values
                                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                                }
                            }
                        });
                    });

                    var chart = new Highcharts.Chart(options);
                }

                var table = document.getElementById('datatable'),
        options = {
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            xAxis: {
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: 
       {
            formatter: function() 
           {
               return '<b>'+ this.series.name +'</b><br/>'+
                  this.y +' '+ this.point.name;
            }
       },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                    }
                }
            }
        }
    };

                Highcharts.visualize(table, options);
            });

        });

    </script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<table id="datatable" border=1>
    <thead>
        <tr>
            <th>Fruits</th>
            <th>Qty</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>

        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>

        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>

        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>

        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>

        </tr>
    </tbody>
</table>
</body>
</html>

【问题讨论】：

标签： jquery html charts highcharts pie-chart

【解决方案1】：

您不应该通过 xAxis 的类别字段给切片名称。切片名称应包含在数据对象中。试试这个：

sliceNames = [];
$('tbody th', table).each(function (i) 
{
    sliceNames.push(this.innerHTML);
});

options.series[j - 1].data.push({name: sliceNames[i - 1], y: parseFloat(this.innerHTML)});

您根本不需要类别对象，只需将切片名称填充到任何数组变量中并在推送数据时使用它。

【讨论】：

【解决方案2】：

我对 HighChart 还是很陌生，但你不能只使用类似这样的东西来格式化工具提示或 dataLabel 的输出...

this.series.name = this.series.chart.options.xAxis[0]
                       .categories[this.series.processedYData.indexOf(this.y)];

【讨论】：