使用Flexbox时，Apex图表无法正确调整大小 [英] Apex Charts dont resize properly when using Flexbox

问题描述

最近，我将Floats更改为FlexBox，以更轻松地处理面板(如我对其他问题的建议).虽然大多数事情都按预期运行，但更改后我的Apex Charts出现了问题.

Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change.

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

这是加载时的外观.您会注意到，即使您所在的面板到位，在第一行和第二行图表中也超出了范围，它适用于第一行.

Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row.

如果我确实调整大小(如1mm)，它将开始正常工作.

And if I do resize (like 1mm) it will start working correctly.

任何想法可能是什么问题?

Any idea what could be the problem?

在顶点图表CSS中，它有不使用溢出的注释(我尝试过并且它没有做任何事情)，但是老实说，我什至一次忘记附加CSS，并且没有任何改变(就像JS完成了所有工作一样).

In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the 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时，我真是个菜鸟，请原谅我的语言.

Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language.

推荐答案

我可以清楚地看到问题，并且看起来初始渲染无法正确获得父级宽度(ApexCharts中的错误). 我已经在ApexCharts上创建了票证，并且在发布修复程序时将更新此答案.

I can clearly see the issue and it looks like the initial render fails to get the parent width correctly (bug in ApexCharts). I have created a ticket on ApexCharts and this answer will be updated when the fix is released.

编辑:这不是ApexCharts中的错误.您需要将所有脚本移到末尾，而不是注入HTML来允许SVG文档解析器正确获取元素的大小.

Not a bug in ApexCharts. You need to move all your scripts to the end instead of injecting in the HTML to allow SVG Document parser to get the element's size correctly.

工作 Codepen示例

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图表无法正确调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！