AmCharts - 折线图溢出图容器

时间:2015-12-22 14:24:01

标签: javascript jquery html css amcharts

我正在尝试在我的网站上正确显示折线图,但由于某种原因,它想要溢出图形容器。我已经尝试将box-sizing重置为initial,设置隐藏在图形的所有子元素上的溢出,似乎没有任何工作。我不知道为什么会这样,并且想知道是否有人在他们面前遇到过这个问题?

我已经在下面添加了一张图片,下面是我正在使用的图片,用于设置折线图的对象。

enter image description here

{
"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
}
}

1 个答案:

答案 0 :(得分:4)

如果您在网页上使用<base href>指令,可能会发生这种情况。在这些情况下,SVG中对掩蔽滤波器的引用不能正常工作,因此从绘图区域突出的线条。

为避免这种情况,只需将全局baseHref设置行添加到您的代码中:

AmCharts.baseHref = true;

请注意,这必须是一个独立的行(不是图表配置的一部分),然后 之前创建图表的任何代码。