Отображение границы таблицы данных на диаграмме P ie Highcharts

Question

Показанная таблица сделана с использованием Highcharts.drawTable, как в,

http://jsfiddle.net/BlackLabel/d36fmcj5/

Так как таблица отображается внутри блока круговой диаграммы вручную, мне нужен способ добавить границу к данным таблицы, если возможно, примерно так введите описание изображения здесь

Пожалуйста, помогите мне исправить эту проблему.

$(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>'
    },
    plotOptions: {
      pie: {
			  showInLegend: true,
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          verticalAlign: 'top',
          enabled: true,
          color: '#000000',
          connectorWidth: 1,
          distance: -50,
          connectorColor: '#000000',
          format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
        }
      }
    },
    series: [{
      type: 'pie',
      name: 'Vulnerability Counts',
      data: [{
        y: 4,
        name: 'high',
      }, {
        y: 8,
        name: 'medium',
      }, {
        y: 2,
        name: 'low'
      }]
    }]
  });
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

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