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
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