顶点图表宽度溢出或不拉伸答案

【问题标题】：apexchart width overflows or doesn't strech顶点图表宽度溢出或不拉伸
【发布时间】：2020-09-29 17:33:17
【问题描述】：

我正在使用带有 vue 的 apexcharts。我希望迷你图占据其父级宽度的 100%。

这就是我所做的：

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

我也尝试将宽度设置为组件的属性，但它的行为相同。

这是我的图表选项：

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

所以这里没什么特别的，它是从 apex 仪表板示例中复制的，我唯一添加的就是尝试将宽度设置为 100%。

它溢出它的父容器（绿色）和父容器（黄色），如下所示：

但是当我调整窗口大小（不刷新）时，它不会保留它的大小，它变得比父窗口小：

我怎样才能让它填充其父级（绿色容器）的宽度并保持这种状态（响应式）？

谢谢

【问题讨论】：

你在图表周围使用 CSS flex 吗？
在某种程度上。我正在使用 vuetify 的网格。但它比图表高 3-4 级。
我发现调整大小后的差距是由于系列中缺少数据以及我为 x 轴设置了 max 属性的事实。现在在调整大小后它需要 100%，但在第一次渲染时它会溢出。我发现了这个问题stackoverflow.com/questions/55326858/…，但在我的情况下，没有获取父节点失败的错误。

标签： javascript css vue.js apexcharts

【解决方案1】：

我遇到了同样的问题，我刚刚删除了容器上的 display: flex 并解决了问题 :)

【讨论】：

非常感谢。我不知道它为什么有效，但它解决了我的问题！

【解决方案2】：

我发现调整大小后的差距是由于系列中缺少数据以及我为 x 轴设置了 max 属性的事实。

这样就解决了问题 #2。

显然图表在它应该之前渲染，所以它没有得到正确的父宽度，为我解决它的一种解决方法是在安装组件后不渲染图表。

【讨论】：

嗨，你能告诉我如何解决这个问题吗？我正在为顶点图表使用 vuetify v-flex，但面临同样的问题。

【解决方案3】：

chart: {
    width: '100%'
}

这可能会解决您的问题

使用this method ref解决了我的问题

【讨论】：