Question

我希望在图表的某个部分为100％时删除白色边框。在100％我希望圆环图完整（没有线）。不过，当有片段时，我仍然需要粗线。有谁知道我怎么做到这一点？非常感谢你的帮助！非常感谢！

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
<div id="vacation-time-chart2" style="min-width: 300px; height: 300px; margin: 0 auto"></div>


$(function () {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'vacation-time-chart',
        type: 'pie',
        height: 250,
        width: 250,
        borderRadius: 0
    },
    credits: {
        enabled: false
    },
    title: false,
    tooltip: false,
    plotOptions: {
        pie: {
            borderWidth: 6,
            startAngle: 90,
            innerSize: '55%',
            size: '100%',
            shadow: true,
            // {
            //     color: '#000000',
            //     offsetX: 0,
            //     offsetY: 2,
            //     opacity: 0.7,
            //     width: 3
            // },
            dataLabels: false,
            stickyTracking: false,
            states: {
                hover: {
                    enabled: false
                }
            },
            point: {
            events: {
                mouseOver: function(){
                    this.series.chart.innerText.attr({text: this.y});
                }, 
                mouseOut: function(){
                    this.series.chart.innerText.attr({text: 112});
                }
            }
            }
        }
    },

    series: [{
        data: [
            {y:0, color: colors[0]},
            {y:0, color: colors[1]},
            {y:100, color: colors[2]}
        ]
        // data: [
        //     ['Firefox',   44.2],
        //     ['IE7',       26.6],
        //     ['IE6',       20],
        //     ['Chrome',    3.1],
        //     ['Other',    5.4]
        // ]
    }]
},
 function(chart) { // on complete

    var xpos = '50%';
    var ypos = '53%';
    var circleradius = 102;

// Render the text 
chart.innerText = chart.renderer.text('112', 112, 125).css({
        width: circleradius*2,
        color: '#4572A7',
        fontSize: '16px',
        textAlign: 'center'
  }).attr({
        // why doesn't zIndex get the text in front of the chart?
        zIndex: 999
    }).add();
});

}）;

Answer 1

我不知道是否有办法在Highcharts配置对象中有条件地设置边框宽度。无论数据点如何，要完全删除白色边框：

plotOptions: {
  pie: {
    borderWidth: 0
  }
}

Answer 2

没有在Highchart配置中动态设置它，但是在检索到数据后这样做了：

if( pie.series[0].data.length === 1 ) {
  pie.options.plotOptions.pie.borderWidth = 0;
}

Highcharts甜甜圈图表在100％时删除边框

2 个答案: