简体   繁体   English

如何从highchart.js中的饼图中删除空格?

[英]How to remove white space from pie chart in highchart.js?

顶部有空白的蓝色圆圈,用红色圈出。

I want to remove the white space circled in red above. 我想删除上面用红色圈出的白色空间。 I am using the code below in jsFiddle: 我在jsFiddle中使用下面的代码:

$(function () {

$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,borderRadius: 0,
                    borderWidth:0,
    },
    title: {
        text: 'Browser market shares at a specific website, 2010'
    },
     tooltip: false,
    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',
         size: '115%',
         innerSize: '110%',
        data: [
            ['Firefox',   45.0]

        ]
    },{type: 'pie',
        name: 'Browser share',
         size: '100%',
                        innerSize: '98%',
        data: [
            ['Firefox',   45.0]

        ]}
]});
});

Fiddle: http://jsfiddle.net/jF22s/ 小提琴: http//jsfiddle.net/jF22s/

use borderWidth :0 in plot options. 在plot选项中使用borderWidth :0

  pie: {
        allowPointSelect: true,
        cursor: 'pointer',

         borderWidth: 0, // This removes the border

Updated fiddle : http://jsfiddle.net/jF22s/5/ 更新小提琴: http//jsfiddle.net/jF22s/5/

If that is not acceptable ( as it still has a very minute space ), add a border of same color to the chart, that would remove all space: 如果这是不可接受的(因为它仍然有一个非常小的空间),添加相同颜色的边框到图表,这将删除所有空格:

borderWidth: 1,
borderColor:'#2F7ED8',

fiddle : http://jsfiddle.net/jF22s/15/ 小提琴http//jsfiddle.net/jF22s/15/

不幸的是,这是臭虫, 这里报道

borderColor: null will fix the issue borderColor: null将解决问题

plotOptions: {
    pie: {
        borderColor: null,
    }
}

ref: http://jsfiddle.net/highcharts/NK5db/17/ 参考: http//jsfiddle.net/highcharts/NK5db/17/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM