动态字体大小和宽度的响应式图表

Question

我试图使饼图完全响应，以便可以在较小的设备上查看它。 我使用最新的Highcharts版本（版本5）绘制图表。

我使用下面的代码为图表提供了最大和最小宽度，因此图表不会扩大或缩小得太多

JS代码

responsive: {
  rules: [{
    condition: {
      maxWidth: 500,
      minWidth: 100
    },
    chartOptions: {
      legend: {
        enabled: true
      }
    }
  }]
},

但不幸的是，这似乎不起作用。 最大和最小宽度未应用于图表。

当在小屏幕上查看时，如何动态（较小）设置图例和图表中的字体大小（百分比和中心文本）。 现在，在较小的屏幕上，字体大小保持不变，这会占用大量空间并破坏图表

我已经在这里设置了一个演示https://jsfiddle.net/livewirerules/6wu282fu/11/

任何帮助将不胜感激

Answer 1

我为即将到来的裁判回答

从Highcharts 5开始，您可以使用带有em号的动态值来更改字体大小，例如：1em

您可以在此处查看其运行情况：

 [http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/em/][1]