Question

我有一个半饼图，但我希望容器好像是一个半饼图，而不是像一个整个馅饼那样隐藏一半。我的意思是，我不希望容器大到足以容纳整个馅饼，只有一半。然后我会在下面放置一个自定义图例。以下是我看到的内容：http://jsfiddle.net/dangeruponu/bk2E5/

example

以下是我的选择：

    $(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            width: 400,
            height: 400
        },
        title: {
            text: 
                '<div style="padding: 10px; color: white; background-color: #000000">' +
                    '<span style="font-size: xx-large">11</span><br/>' +
                    '<span>Total</span>' +
                '</div>',
            floating: true,
            useHTML: true,
            y: 100
        },
        legend: {
            symbolHeight: 0,
            symbolWidth: 0,
            floating: true,
            useHTML: true,
            labelFormat: '<div style="width: 80px; background-color: {color}; text-align: center; border: 2px solid"><span>{name}</span><br/><span style="font-size: larger">{y}</span></div>'
        },
        tooltip: {
            pointFormat: '{point.name}: {point.y}',
            headerFormat: ''
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                events: {
                    click: function(event){
                        scope.$apply(urlService.url(event.point.page));                                 
                    }
                },
                selected: false,
                startAngle: -90,
                endAngle: 90,
                innerSize: '90%',
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            data: [
                {
                    name: 'Re-work',
                    y: 4,
                    page: '',
                    color: '#7CB5EC'
                },
                {
                    name: 'New',
                    y: 2,
                    page: 'NEW',
                    color: '#995CAC'
                },
                {
                    name: 'In-progress',
                    y: 5,
                    page: '/orders/in_progress',
                    color: '#90ED7D'
                }
            ]
        }]
    });
});

我意识到我可以将中心向下移动但是我会在顶部有一大块空间。是否可以将容器与图表分开调整？

Answer 1

默认情况下，饼图的垂直中心为50％。所以当你只显示上半部分时，你应该调整中心。 http://api.highcharts.com/highcharts#plotOptions.pie.center。 size选项也可能需要设置。

Answer 2

首先尝试调整高度：

         height: 250

Answer 3

你可以提升传奇。

y:-100,

这会将图例100px发送到占用不需要的空间。

更新了您的jsfiddle here

我希望这会对你有所帮助

highcharts半饼容器太大了

3 个答案: