如何将HighCharts饼图转换为钻取时的HTML/表

Question

是否有任何方法可以将饼图转换为HTML表？我已经看到这个jQuery插件http://highcharttable.org/将HTML表转换为图表，但我希望与此完全相反。

最好是在单击一块饼图时，我想这样做，以查看该部分后面的数据记录。

谢谢

Answer 1

这可以通过处理绑定到图表的单击事件来完成。

这是处理程序的示例代码：

var createTable = function($chart) {
    console.log("$series = %o", $chart);
    // remove the existing table
    $('#here_table table').remove();
    // create a table object
    var table = $('<table></table>').addClass('chart-table');
    // iterate the series object, create rows and columnts
    $.each($chart.series.data, function( index, value ) {
        var row = $('<tr></tr>').addClass('chart-row');
        var col1 = $('<td></td>').text(value.name).appendTo(row);
        var col2 = $('<td></td>').text(value.percentage).appendTo(row);
        // mark the row of the clicked sector
        if ($chart.name == value.name)
            row.addClass('selected');
        table.append(row);
    });
    // insert the table into DOM
    $('#here_table').append(table);
};

完整的示例在这里：jsfiddle

另外，请检查以下内容：http：//www.highcharts.com/docs/getting-started/frequally-asked-questions#add-data-tabal