javascript - 配置饼图以使用最小空间并且从不隐藏标签

Question

我正在尝试配置饼图以使用尽可能小的空间。

1. 我设置了固定直径(到圆，而不是到容器)，以便我可以比较两个图表。
2. 没有设置固定的宽度和高度(容器)，因为它可以隐藏标签(标签是动态的。有时它们可​​能很长。并且每个图表的长度不同。)

这是jsfiddle 。 请注意，有两张图表，一张在一张下方。

这是我的代码:

$(function ()
{
  draw('container1');
  draw('container2');
  function draw(id)
  {
      $('#' + id).highcharts(
      {
          chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
          title:{ text: null },
          legend: { enabled: false },
          credits: { enabled: false },
          tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
          plotOptions: {
                          pie: {
                                  size: 100,
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                      style: {
                                          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                      }
                                  }
                              }
                      },
          series: [/* data */]
      });
  }
});

当前问题:

1. 图表周围有一些未使用的空间(灰色)。
2. 即使左侧有可用空间，右侧标签的某些部分也会被隐藏。

编辑 1:来自 api docs如果没有在容器元素上设置，它似乎使用默认高度 400px 和宽度 600px 。有什么方法可以指示它使用所需的最小宽度和高度吗？

Answer 1

原因2:饼图大小，增大就看不到了。

原因3:如果设置图表的大小，highcharts不会自动将图表居中，图表的中心将是div的中心，这会导致标签被切断。 如果您不设置大小，highcharts 会将图表重新居中以容纳绘图区域中的所有标签。

尝试使用 minSize 而不是 size。