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

Question

我正在使用 HichChart 在我的 Angular 应用程序中显示一个 donut (饼图)图。问题是图表的“内部大小”随着系列中提供的值而变化。该图表在系列中只有两个值。例如，当我将系列值提供为 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 水平放置并占用大量空间，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/