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

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

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

謝謝

來源

2015-05-04 Adnan

取決於您使用的圖表庫。通常，數據作爲對象或值或JSON數組輸入到圖表中。我建議使用這個初始數據動態地創建你的表。 – dekkard

我正在使用highcharts。當然，這是用實際數據自己做的一個選擇。但我想知道Highcharts是否有任何內置功能。 – Adnan

這可以通過處理綁定到圖表的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

來源

2015-05-04 13:56:02 dekkard

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

回答

相關問題