Question

我想使用Highcharts在饼图中显示数据表。我可以在外面显示表，但在导出图像时，不会导出数据表。所以我的目标是在饼图中显示数据表。参考this。我能够部分实现它。demo

但是我怎么能给列标题和边框呢？

$(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]
        ]
    }]
});
});

Answer 1

对于列标题，我不知道。取决于你想做什么。

至于边框，因为这是SVG，您可以使用RECT和PATH绘制边框。看看你的演示的this fork是否有一些粗糙的边界，也许你可以改进它。

在Highcharts-Pie图表中的数据表

1 个答案: