显示的表格是使用 Highcharts.drawTable 完成的，如下所示，
http://jsfiddle.net/BlackLabel/d36fmcj5/
由于表格是在饼图 div 中手动呈现的，因此我需要一种方法来为表格数据添加边框，如果可能的话，像这样 在此处输入图像描述
请帮我解决这个问题。
$(function() {
Highcharts.setOptions({
colors: [
'#1cc88a', '#008a59', '#6adfb6'
]
});
Highcharts.drawTable = function() {
// user options
var tableTop = 200,
colWidth = 60,
tableLeft = 50,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = '';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 1) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(series[0].data, function(i) {
renderer.text(
series[0].data[i].name,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
$.each(series[0].data, function(i) {
renderer.text(
Highcharts.numberFormat(series[0].data[i].y, valueDecimals) + valueSuffix,
150,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'left'
})
.add();
});
}
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
events: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
杨魅力
相关分类
