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

问题描述

我试图获得一个线图在我的网站上正确显示，但由于某种原因，它想溢出图表容器。我已经尝试重置框大小为初始，设置溢出隐藏的图的所有子元素，似乎没有什么工作。我不知道为什么会发生这种情况，想知道是否有人在自己之前遇到过这个问题？

我在下面添加了一个我正在获取的图片，下面是用于设置折线图的对象。

  {
type：serial，
theme：light，
marginRight 80，
autoMarginOffset：20，
marginTop：7，
dataProvider：queryData.data.result，
valueAxes：[{
 axisAlpha：0.2，
dashLength：1，
position：left
}]，
mouseWheelZoomEnabled：true，
 ：[{
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 bcategoryAxis：{
parseDates：true，
axisColor：#DADADA，
dashLength：1，
minorGridEnabled：true 
}，
export：{
enabled：true 
} 
} 
  
 
解决方案
如果您使用< base href> 指令，网页。在这些情况下，引用SVG中的屏蔽过滤器无法正常工作，因此从绘图区域突出的线条。
 
 
 
为了避免简单地添加全局  baseHref  设置行到您的代码：
  AmCharts.baseHref = true; 
  
请注意，这必须是独立的行（不是图表配置的一部分） >之前任何创建图表的代码。
 
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
}
}

解决方案
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.

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屋！