在饼图 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: {&nbsp; &nbsp; showTable: true,&nbsp; &nbsp; tableCaption: false},API：https ://api.highcharts.com/highcharts/exporting.showTable