Highcharts饼图如何减少由图宽

时间:2017-07-19 14:47:07

标签: javascript highcharts pie-chart

当图例位于图表右侧并且其布局设置为垂直时,是否有办法减少图表和图例之间的空白? 似乎问题是由绘图区域的宽度引起的,由于图表始终是圆形,因此在饼图中变得不必要地变大。 图表的宽度和高度无法修复以允许响应。

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",
  }
}

1 个答案:

答案 0 :(得分: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

test("20170707", "20170707", "20170710", "20170710")
    .then((response) => {
         console.log(response);
    });

实例:https://jsfiddle.net/gdh86chg/11/