Highcharts餅圖如何減少由圖寬度引起的圖和圖例之間的空間

Question

當圖例位於圖表的右側並且其布局設置為垂直時，是否可以減少圖表和圖例之間的空白？ 問題似乎是由繪圖區域的寬度引起的，在餅圖中，該區域不必要地變大，因為該圖表將始終是一個圓形。 圖表的寬度和高度不能固定以允許響應。

https://jsfiddle.net/rredondo/gdh86chg/

圖表選項為：

{
  chart: {
    type: 'pie',
    plotBorderWidth: 1,
    plotBorderColor: '#3F4044',
    borderColor: '#AAAAAA',
    borderWidth: 2
  },
  series: [{
    name: 'Incidents',
    data: [{
      name: "Critical",
      y: 1,
      color: "#FF0000"
    }, {
      name: "Severe",
      y: 8,
      color: "#F57622"
    }, {
      name: "Major",
      y: 13,
      color: "#F0A401"
    }, {
      name: "Minor",
      y: 25,
      color: "#F0C801"
    }, {
      name: "Information",
      y: 30,
      color: "#4AB6FF"
    }],
    size: '80%',
    innerSize: '60%',
    showInLegend: true,
    dataLabels: {
      enabled: false
    }
  }],
  legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
  }
}

Answer 1

正如我在評論中提到的那樣，您應該能夠在圖表加載時移動圖例並使用attr（）重繪：

http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/chart.events.redraw http://api.highcharts.com/highcharts/Element.attr

    // Create the chart
var updateLegend = function(chart) {
  var center = chart.series[0].center;
  console.log(chart.legend)
  chart.legend.group.attr({
    translateX: center[0] + center[2] / 2
  });
}
var chart = Highcharts.chart('container', {
  chart: {
    type: 'pie',
    plotBorderColor: '#3F4044',
    borderColor: '#AAAAAA',
    borderWidth: 2,
    marginRight: 0,
    marginLeft: 0,
    events: {
      load: function() {
        updateLegend(this)
      },
      redraw: function() {
        updateLegend(this);
      }
    }
  },
  series: [{
    name: 'Incidents',
    data: [{
      name: "Critical",
      y: 1,
      color: "#FF0000"
    }, {
      name: "Severe",
      y: 8,
      color: "#F57622"
    }, {
      name: "Major",
      y: 13,
      color: "#F0A401"
    }, {
      name: "Minor",
      y: 25,
      color: "#F0C801"
    }, {
      name: "Information",
      y: 30,
      color: "#4AB6FF"
    }],
    size: '80%',
    innerSize: '60%',
    showInLegend: true,
    dataLabels: {
      enabled: false
    }
  }],
  legend: {
    layout: "vertical",
    align: "right",
    verticalAlign: "middle",
  }
});

實時示例： https ： //jsfiddle.net/gdh86chg/11/