饼图 (HighChart) 的内部大小随系列中提供的值而变化

Question

我正在使用 HichChart 在我的 angular 应用程序中显示圆环图（饼图）。问题是图表的 'inner size' 随系列中提供的值而变化。该图表在系列中只有两个值。例如，当我提供 50 和 50 的系列值时，图表内部尺寸变得非常薄。如果我提供 20 和 80 的值，它看起来很好。

有趣的是，如果我运行我在 JsFiddle 中为 50 和 50 场景编写的相同代码，图表内部尺寸不会变薄。（请注意，在 JsFiddle 中，我选择了最相关的开发设置 - JavaScript + AngularJS 2.0.0-alpha.47）。

在我的应用程序中，'package.json' 文件将 highchart 版本显示为 "highcharts"：“^6.1.4”，"highcharts-angular"：“^2.3.0”。请在下面找到我的 angular 版本和一些附加信息。请帮我解开这个谜。

setCompletedTasksDonutChartRM(completedTasks, notCompletedTasks) {
this.donutChartOptionsForRM_Completed = {
  chart: {
    type: 'pie'
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      innerSize: 250
    }
  },
  colors: ['#F0F0F0', '#4BB482', '#4cb581'],
  series: [{
    name: 'Tasks (%)',
    data: [
      ['Not completed', 50],
      ['Completed', 50],
    ]
  }]
};
}

https://jsfiddle.net/kushannc/4pLkbtzc/5/

Answer 1

解决方法很简单。当您设置 50, 50 dataLables 水平放置并占用大量 space 时，innerSize 值是固定的（在您的示例中为 innerSize = 250），因此唯一适合图表的选项面积是为了减少馅饼的厚度。在更宽的屏幕上检查相同的设置，您会看到它。

解决办法是用innerSize作为饼图的百分比。

代码：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  plotOptions: {
    pie: {
      innerSize: '70%'
    }
  },
  colors: ['#F0F0F0', '#4BB482', '#4cb581'],
  series: [{
    name: 'Tasks (%)',
    data: [
      ['Not completed', 50],
      ['Completed', 50],
    ]
  }]
});

演示： https://jsfiddle.net/BlackLabel/c0Lyx3jo/2/

饼图 (HighChart) 的内部大小随系列中提供的值而变化

Inner size of pie chart (HighChart) getting change with the values provided in the series

highcharts

pie-chart

donut-chart

typescript

angular