数据表内Highcharts饼图 [英] datatable inside Highcharts-Pie chart

问题描述

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

但是我怎样才能给它的列标题和边框？

  $（function（）{
 
 
 Highcharts.drawTable = function（）{
 
 //用户选项
 var tableTop = 200，
 colWidth = 60，
 tableLeft = 50，
 rowHeight = 20，
 cellPadding = 2.5，
 valueDecimals = 1，
 valueSuffix =''; 
 
 //内部变量
 var chart = this，
 series = chart.series，
 renderer = chart.renderer，
 cellLeft = tableLeft; 
 
 //绘制分类标签
 $ .each（系列，函数（serie_index，serie）{
 renderer.text（
 serie.name，
 cellLeft + CELLPADDING，
桌面+（serie_index + 1）*的rowHeight  -  CELLPADDING 
）
的CSS（{
 fontWeight设置： '粗体' 
}）
 .add（）; 
}）; 
 
 
 $ b $ .each（series [0] .data，function（i）{
 
 renderer.text（
 series [ 0]。数据[I] .name和
 cellLeft +列表ColWidth  -  CELLPADDING，
桌面+（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（{
图：{
 plotBackgroundColor：null，
 plotBorderWidth：null，
 plotShadow：false，
 events：{
 load：Highcharts.drawTable 
} ，
高度：600，
宽度：800，
 marginBottom：250 
}，
标题：{
 text：'浏览器市场份额网站，2010'
}，
工具提示：{
 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}％'
 
 
 
系列：[{
 type：'pie'，
 name：'浏览器共享'，
 data：[
 ['Firefox'，45.0]，
 ['IE'，26.8]，
 {
名称：'Chrome'，
y：12.8，
切片：true，
 selected：true 
}，
 ['Safari'，8.5]，
 ['Opera'，6.2]，
 ['Others'，0.7 ] 
] 
}] 
}）; 
}）; 
  

解决方案

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

至于边界，因为那是SVG，所以可以使用 RECT 和 PATH 。查看演示的这个分支，了解一些原始边界，也许您可​​以改进它。

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

解决方案

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.

这篇关于数据表内Highcharts饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！