如何將高圖餅圖轉換爲HTML /深入鑽取表

Question

有沒有任何方法將餅圖轉換爲HTML表格？ 我已經看到這個jQuery插件http://highcharttable.org/將HTML錶轉換爲圖表，但我想完全與此相反。

最好我想單擊一塊餅圖來查看僅在該部分後面的數據記錄。

謝謝

Answer 1

這可以通過處理綁定到圖表的click事件來完成。

這裏的處理程序的示例代碼：

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/frequently-asked-questions#add-data-table