饼图（HighChart）的内部大小随系列中提供的值而变化答案

【问题标题】：Inner size of pie chart (HighChart) getting change with the values provided in the series饼图（HighChart）的内部大小随系列中提供的值而变化
【发布时间】：2018-11-07 23:14:43
【问题描述】：

我正在使用 HichChart 在我的 Angular 应用程序中显示一个圆环（饼图）图。问题是图表的“内部大小”随着系列中提供的值而变化。该图表在系列中只有两个值。例如，当我将系列值提供为 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”。请在下面找到我的角度版本和一些附加信息。请帮我解开这个谜。

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/

【问题讨论】：

标签： angular typescript highcharts pie-chart donut-chart

【解决方案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/

【讨论】：