AmCharts - 折线图溢出图容器 [英] AmCharts - Line Chart Overflowing graph container

问题描述

我正在尝试让折线图在我的网站上正确显示，但出于某种原因，它想让图形容器溢出.我已经尝试将 box-sizing 重置为初始值，将溢出设置隐藏在图表的所有子元素上，但似乎没有任何效果.我不知道为什么会发生这种情况，想知道是否有人在自己之前遇到过这个问题?

I am trying to get a line graph to display correctly on my site, but for some reason it wants to overflow the graph container. I have tried reset the box-sizing to initial, setting overflow hidden on all child elements of the graph and nothing seems to be working. I have no idea why this is happening and was wondering if anyone had come across this issue before themselves?

我在下面添加了一张图片，展示了我目前正在获取的内容以及用于设置折线图的对象.

I've added an image below of what I am currently getting and underneath that, the object that is being used to set up the line graph.

{
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": queryData.data.result,
"valueAxes": [{
    "axisAlpha": 0.2,
    "dashLength": 1,
    "position": "left"
}],
"mouseWheelZoomEnabled": true,
"graphs": [{
    "id": "g1",
    "balloonText": "[[value]]",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "hideBulletsCount": 50,
    "title": "red line",
    "valueField": "value",
    "useLineColorForBulletBorder": true,
    "balloon": {
        "drop": true
    }
}],
"chartScrollbar": {
    "autoGridCount": true,
    "graph": "g1",
    "scrollbarHeight": 40
},
"chartCursor": {
    "limitToGraph": "g1"
},
"categoryField": "name",
"dataDateFormat": "DD/MM/YYYY  HH:NN:SS",
"categoryAxis": {
    "parseDates": true,
    "axisColor": "#DADADA",
    "dashLength": 1,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
}
}

推荐答案

如果您在网页上使用 指令，则可能会发生这种情况.在这些情况下，SVG 中对屏蔽过滤器的引用无法正常工作，因此线条从绘图区域突出.

This might be happening if you are using <base href> directive on your web page. In those cases references to masking filters in SVG do not work properly, hence lines protruding from plot area.

为了避免这种情况，只需添加全局 baseHref 为您的代码设置行:

To avoid that simply add the global baseHref setting line to your code:

AmCharts.baseHref = true;

请注意，这必须是一个独立的行(不是图表配置的一部分)并且在任何创建图表的代码之前.

Please note that this must be a standalone line (not a part of chart config) and go before any of the code that creates charts.

这篇关于AmCharts - 折线图溢出图容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！