高图，移动响应，图表不适合容器内

Question

我在移动响应页面上有一个甜甜圈图和一个条形图。在台式机上，它们是并排的。在移动设备上，甜甜圈位于条形图上方。在台式机上，甜甜圈有时会被切断到一侧。具有highcharts-container类的元素的默认宽度为600px。

我已阅读重排（API link），但在我的情况下不起作用。例如，描述为here。

代码示例：

  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -40,
        style: {
          fontWeight: 'bold',
          color: 'white',
        }
      },
      startAngle: 0,
      endAngle: 360,
    }
  },


  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },

这里是Codepen，但是问题来了又去。我删除了不相关的代码。

Answer 1

您需要在CSS文件中定义#container和#container2的宽度，然后它才能正常工作。这是代码和示例：

#container {
  width: 100%
}
#container2 {
  width: 100%
}

实时示例：https://codepen.io/anon/pen/XBGOgK

亲切的问候！