使用 Flexbox 时 Apex 图表无法正确调整大小

Question

最近我将 Floats 更改为 FlexBox 以便更轻松地使用面板（正如我在其他问题上所建议的那样）。虽然大多数事情都按我预期的那样工作，但我在更改后遇到了 Apex 图表问题。

完整代码在这里： https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html

这是加载后的样子。您会注意到，在第一行和第二行图表中，即使它们所在的面板就位并且它适用于顶行，也会超出范围。

如果我调整大小（例如 1 毫米），它将开始正常工作。

知道可能是什么问题吗？

在顶点图表中 CSS 它有不使用溢出的注释（我试过了但它什么也没做）但老实说，我什至有一次忘记附上那个 CSS 但什么也没有改变了（就像一切都由 JS 完成。

        .apexcharts-canvas {
            position: relative;
            user-select: none;
            /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
        }

        /* scrollbar is not visible by default for the legend, hence forcing the visibility */

请记住，在 JS/CSS/HTML 方面我完全是菜鸟所以请原谅我的语言。

Answer 1

您需要将所有脚本移动到末尾，而不是在 HTML 中注入，以允许 SVG 文档解析器正确获取元素的大小。

工作Codepen Example

var options = {
  "chart": {
    "height": 350,
    "type": "line",
    "toolbar": {
      "show": true,
      "tools": {
        "download": true,
        "selection": true,
        "zoom": true,
        "zoomin": true,
        "zoomout": true,
        "pan": true,
        "reset": true
      },
      "autoSelected": "zoom"
    }
  },
  "plotOptions": {
    "bar": {
      "horizontal": true
    }
  },
  "dataLabels": {
    "enabled": true,
    "offsetX": -6,
    "style": {
      "fontSize": "12px",
      "colors": [
        null
      ]
    }
  },
  "series": [{
      "name": "People count",
      "data": [
        400,
        430,
        448
      ]
    },
    {
      "name": "People death",
      "data": [
        450,
        0,
        200
      ]
    }
  ],
  "xaxis": {
    "type": "category",
    "categories": [
      "2015",
      "2016",
      "2017"
    ]
  },
  "stroke": {
    "show": true,
    "curve": "straight",
    "width": 2,
    "colors": [
      "#0000ff",
      "#008000"
    ]
  },
  "legend": {
    "position": "right",
    "offsetY": 100,
    "height": 230
  },
  "title": {

  }
}

var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
  options
);
chart.render();

使用 Flexbox 时 Apex 图表无法正确调整大小

Apex Charts dont resize properly when using Flexbox

html

javascript

css

apexcharts