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]

具有动态字体大小和宽度的响应式高图

1 个答案: