javascript 如何从 HighCharts 饼图中删除白色边框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30077367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 11:38:04  来源:igfitidea点击:

How can I remove the white border from HighCharts pie chart?

javascriptjqueryhtmlhighcharts

提问by vikujangid

I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.

我正在使用 High-charts 来显示饼图,谁能告诉我如何删除半径周围的这个白色边框。我的代码也在下面给出了图表的屏幕截图。

I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand

我对高图表没有很多经验,如果有人知道请帮助我。该文档也很难阅读和理解

$(function () {
  
  $('#cashflow_graph').highcharts({
        chart: {
            type: 'pie',
   backgroundColor:'red',
        },
        title: {
            text: false
        },
        yAxis: {
            title: {
                text: false
            }
        },
        plotOptions: {
            pie: {
                dataLabels: {
                        enabled: false
                    },
                shadow: false,
                center: ['50%', '50%']
            },
   series: {
    states: {
     hover: {
      enabled: false,
      halo: {
       size: 0
      }
     }
    }
   },
   
        },
   credits: {
            enabled: false
        },
        tooltip: {
   enabled: false,
            valueSuffix: '%'
        },
        series: [{
            name: 'Cash Flow',
            data: [
                {
                    name: 'Incoming',
                    y: 40,
                   
     color: '#87b22e'
                },
    {
                    name: 'Outgoing',
                    y: 30,
                    
      color: 'black'
                },
    {
                    name: '',
                    y: 30,
      color: 'white'
                }
                
            ],
            size: '80%',
            innerSize: '80%',
            dataLabels: {
    enabled: false,
                formatter: function () {
              
     return false;
                }
            }
        }]
    });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>


<div id="cashflow_graph" style="height: 300px; width:100%;"></div>

enter image description here

在此处输入图片说明

回答by Rory McCrossan

You need to set the plotOptions.pie.borderWidthproperty to 0:

您需要将该plotOptions.pie.borderWidth属性设置为0

$(function() {
  $('#cashflow_graph').highcharts({
    chart: {
      type: 'pie',
      backgroundColor: 'red',
    },
    title: {
      text: false
    },
    yAxis: {
      title: {
        text: false
      }
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: false
        },
        shadow: false,
        center: ['50%', '50%'],
        borderWidth: 0 // < set this option
      },
      series: {
        states: {
          hover: {
            enabled: false,
            halo: {
              size: 0
            }
          }
        }
      },

    },
    credits: {
      enabled: false
    },
    tooltip: {
      enabled: false,
      valueSuffix: '%'
    },
    series: [{
      name: 'Cash Flow',
      data: [{
          name: 'Incoming',
          y: 40,

          color: '#87b22e'
        }, {
          name: 'Outgoing',
          y: 30,

          color: 'black'
        }, {
          name: '',
          y: 30,
          color: 'white'
        }

      ],
      size: '80%',
      innerSize: '80%',
      dataLabels: {
        enabled: false,
        formatter: function() {
          return false;
        }
      }
    }]
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>

<div id="cashflow_graph" style="height: 300px; width:100%;"></div>