在饼图 Highcharts 中显示数据表边框

Question

显示的表格是使用 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>'    },  

Answer 1

我认为更好的解决方案是使用export-data已实现功能的模块来创建数据表并设置exporting.showTable为true. 该模块呈现的表格可以通过 CSS 设置样式。

演示：http: //jsfiddle.net/BlackLabel/f1qh3g58/

exporting: {

    showTable: true,

    tableCaption: false

},

API：https ://api.highcharts.com/highcharts/exporting.showTable