代码之家 › 专栏 › 技术社区 › MadBoy

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

css html javascript

MadBoy · 技术社区 · 7 年前

完整代码如下: https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html

下面是加载时的外观。你会注意到,在第一行和第二行图表出界,即使你的面板,他们是在地方,它的工作为最上面的一行。

知道有什么问题吗?

在apex charts 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 */

1 回复 | 直到 6 年前

junedchhipa 5 年前

您需要将所有脚本移到末尾,而不是注入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();

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前