删除高图表中饼图周围的边框

时间:2016-08-08 21:05:32

标签: javascript highcharts

如何删除饼图周围的边框。

enter image description here

我尝试了以下选项,但它没有工作:

plotOptions.pie.borderWidth:0
 plotOptions.pie.borderColor:'#f2f2f2'它也没有用。

以下是完整代码:

$('#PreQualifiedChart').highcharts({
    chart: {
        plotBackgroundColor: '#f2f2f2',
                plotBorderWidth: 0,
                        plotShadow: false,
                        height: 300,
                    widht: 250,
                },
     credits: {
            enabled: false
     },
     exporting: {
         buttons: {
             contextButton: {
                 enabled: false
             }  

         }
     },
     title: null,
     tooltip: {
                headerFormat: '',
                    pointFormat : '{point.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
            },
     plotOptions: {
                pie: {
                dataLabels: {
            enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                                color: '#f2f2f2',
                                textShadow: '0px 1px 2px black'
                                }
                                },
                center: ['50%', '50%'],
                borderWidth: 0,
                borderColor: '#f2f2f2'
                     }
                                },
      series: [{
                                    dataLabels: {
                                enabled: false,
            },
                            type: 'pie',
                            name: '',
                                innerSize: '50%',
                        data: [
                    {
            name: 'Submitted All Docs',
            y: SAD,
            color: '#4B99D2',
                    labels: {
                enabled: false
                },
                },
                {
                    name: 'Submitted Missing Docs',
                    y: SMD,
                        color: '#e5a34a',
                            labels: {
                        enabled: false
                },
                },
                {
                    name: 'Not Submitted',
                    y: NS,
                    color: '#844b03',
                    labels: {
                    enabled: false
                },
                }
            ]
            }]
                        });

1 个答案:

答案 0 :(得分:2)

我认为你可以在你的情况下使用marginTop,marginBottom等。在这里,您可以在Highcharts API中找到有关此参数的信息:

http://api.highcharts.com/highcharts#chart.marginTop http://api.highcharts.com/highcharts#chart.marginBottom http://api.highcharts.com/highcharts#chart.marginLeft http://api.highcharts.com/highcharts#chart.marginRight

在这里,您可以找到图表如何使用此方法的示例:

chart: {
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      plotBackgroundColor: '#f2f2f2',
      plotBorderWidth: 0,
      plotShadow: false,
      height: 200,
      widht: 150,
    },

http://jsfiddle.net/pe4csrr7/3/

另一个想法是使用backgroundColor而不是plotbackgroundColor,在这里你可以看到一个如何工作的例子:

chart: {
  backgroundColor:'#f2f2f2',
  plotBorderWidth: 0,
  plotShadow: false,
  height: 200,
  widht: 150,
},

http://jsfiddle.net/pe4csrr7/4/

此致

相关问题