饼图与传说重叠

Question

我正在尝试创建一个圆环图，但问题是它与导致问题的传说重叠。我希望它向上移动一点。

Javascript：

   $('#divCustomerServicePieChart').highcharts({

        chart: {
            type: 'pie'
        },
        //colors: [
        //    '#4572A7',
        //    '#AA4643'],

        tooltip: {
            valueSuffix: '',
            enabled : false
        },
        title: {
            text: '',// retJson.Title,
            margin : 0
        },
        legend: {
            layout: 'vertical',
            verticalAlign: 'bottom',
            align: 'left',
            floating: true,
            enabled: true,
            labelFormatter: function () {
                return this.name;
            }
        },
        plotOptions: {
            pie: {
                borderColor: '#ffffff',
                borderWidth: '4px',
                innerSize: '60%',
                size: '100%',
                dataLabels: {
                    enabled: true, distance: -20, color: 'white',
                    formatter: function () {
                        return this.point.y;
                    }
                }
                // ,columns: { colorByPoint: true }
            }
        },
        series: retJson.d.Series,

    },
      function (chart) { // on complete

          var xpos = '50%';
          var ypos = '30%';
          var circleradius = 55;

          // Render the circle
          chart.renderer.circle(xpos, ypos, circleradius).attr({
              fill: 'red',
          }).add();

          // Render the text 
          chart.renderer.text('<span style="color: white;font-weight:bold;">' + retJson.d.CenterText + '</span>', 80, 150).css({
              width: circleradius * 2,
              fontSize: '25px',
              textAlign: 'center'
          }).attr({
              zIndex: 999
          }).add();

         chart.attr({ transform: "translate(200,40)" });
      });

Answer 1

设置center，例如：

    plotOptions: {
        pie: {
            borderColor: '#ffffff',
            borderWidth: '4px',
            innerSize: '60%',
            size: '100%',
            center: ['50%', '30%'], // set center
            dataLabels: {
                enabled: true, distance: -20, color: 'white',
                formatter: function () {
                    return this.point.y;
                }
            }
            // ,columns: { colorByPoint: true }
        }
    },