datatable inside Highcharts-Pie chart

问题

I want to display the datatable inside Pie chart using Highcharts.I can display the table outside but on exporting the image, datatable is not exported. So my aim is to display datatable inside the Pie chart. Refering to this.I was able to partly acheive it.demo

But how can i give the column headers and borders to it?

$(function () {


   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: 600,
        width: 800,
        marginBottom: 250
    },
    title: {
        text: 'Browser market shares at a specific website, 2010'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]
});
});

回答1:

For the column headers, I don't know. Depends on what you want to do.

As for the borders, since that's SVG, you could draw the borders using RECT and PATH. Take a look at this fork of your demo for some crude borders and maybe you can improve on it.

来源：https://stackoverflow.com/questions/17246973/datatable-inside-highcharts-pie-chart

标签

Highcharts