如何减少Highchart的一般大小

Question

我想在容器中显示4个图表，就像这个架构一样：

所以我需要减少图表的一般大小。我无法找到像chart.resize（totalsize / 4）那样的东西，所以它会减少所有的大小。

或者也许有人在这里已经显示了4个这样的图表但是我的目标是显示3个容器，每个容器有4个图表并且响应如此，如果我减少窗口，容器会下一个，而图表也会下一个。< / p>

所以目前我的代码是：

  <div class="tableChart">
            <div class="row">
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartMem}}</div>
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartCPU}}</div>
            </div>
            <div class="row">
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartNet}}</div>
              <div class="col-md-6 col-sm-12">{{> chart chart_id=this.idChartDisk}}</div>
            </div>
          </div>

结果是：

这就是为什么我需要减少图表的一般尺寸

Answer 1

这应该在一行上布置两个相等的列，您可以编辑它 在引导标准（https://getbootstrap.com/examples/grid/）之后添加更多行或更多列：

root-context.xml

这样你就不需要一个表来制作一个网格。这可以为小型设备提供响应式添加风格。例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Your content here
    </div>
    <div class="col-md-6">
      Your content here
    </div>
  </div>
</div>

这将使列适合超小设备（col-xs-12）中的所有可用空间。那么你也有小型设备的col-sm- ..类。您只需选择适合您需求的产品。