Question

我正在使用HichChart在我的角度应用程序中显示一个甜甜圈（饼图）图表。问题是图表的“内部尺寸”随系列中提供的值而变化。该图表在系列中只有两个值。例如，当我将序列值分别设置为50和50时，图表的内部尺寸将变得非常薄。如果将值分别设置为20和80，则图表的内部尺寸会很好。

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

在我的应用程序中，“ package.json”文件将高图表版本显示为“ 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/

Answer 1

解决方案非常简单。当您设置50, 50数据标签水平放置并占用大量空间时，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）的内部尺寸随着系列中提供的值而变化

1 个答案: