如何将高图饼图转换为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 /深入钻取表

回答

相关问题