如何在高级搜索中将highcharts饼图转换为HTML / Table

Is there any way to convert a pie chart to an HTML table? I have seen this jQuery plugin http://highcharttable.org/ that converts HTML table to a chart, but I want exactly opposite of this.

有没有办法将饼图转换为HTML表格?我已经看到这个jQuery插件http://highcharttable.org/将HTML表转换为图表,但我想要与此完全相反。

Preferably I would like to do this on clicking a piece of pie chart to see the data records only behind that part.

我想在点击一块饼图时只想查看该部分后面的数据记录。

Thanks

1 个解决方案

#1

This can be done by handling the click event bound to the chart.

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

Here's the sample code of the handler:

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

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

Full example is here: JSFiddle

完整的例子在这里:JSFiddle

Also, check this: http://www.highcharts.com/docs/getting-started/frequently-asked-questions#add-data-table

另外,请查看:http://www.highcharts.com/docs/getting-started/frequently-asked-questions#add-data-table

#1