在amchart文档中提到了
connect：false
不适用于xy图表amGraph。如果有任何诀窍可以解决它 任何帮助将不胜感激。
我有一个xy amchart并希望显示其平均值的差距 我使用cx和cy绘制平均图，其中cx = 7,8,9,10没有数据点 最终的图表仍然是平均值的连续线。
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"dataProvider": [ {
"ax": 1,
"ay": 0.5,
"bx": 1,
"by": 2.2,
"cx": 1,
"cy": 1
}, {
"ax": 2,
"ay": 1.3,
"bx": 2,
"by": 4.9,
"cx": 2,
"cy": 3
}, {
"ax": 3,
"ay": 2.3,
"bx": 3,
"by": 5.1,
"cx": 3,
"cy": 4.5
}, {
"ax": 4,
"ay": 2.8,
"bx": 4,
"by": 5.3,
"cx": 4,
"cy": 4
}, {
"ax": 5,
"ay": 3.5,
"bx": 5,
"by": 6.1,
"cx": 5,
"cy": 5
}, {
"ax": 6,
"ay": 5.1,
"bx": 6,
"by": 8.3,
"cx": 6,
"cy": 6.5
}, {
"ax": 7,
"ay": 6.7,
"bx": 7,
"by": 10.5
}, {
"ax": 8,
"ay": 8,
"bx": 8,
"by": 12.3
}, {
"ax": 9,
"ay": 8.9,
"bx": 9,
"by": 14.5
}, {
"ax": 10,
"ay": 9.7,
"bx": 10,
"by": 15
}, {
"ax": 11,
"ay": 10.4,
"bx": 11,
"by": 18.8,
"cx": 11,
"cy": 14.5
}, {
"ax": 12,
"ay": 11.7,
"bx": 12,
"by": 21,
"cx": 12,
"cy": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"dashLength": 1,
"id": "x",
"title": "X Axis"
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"id": "y",
"title": "Y Axis"
} ],
"startDuration": 1,
"graphs": [ {
"balloonText": "x:[[ax]] y:[[ay]]",
"fillAlphas": 0.3,
"fillToAxis": "x",
"lineAlpha": 1,
"xField": "ax",
"yField": "ay",
"lineColor": "#FF6600"
}, {
"balloonText": "x:[[bx]] y:[[by]]",
"lineAlpha": 1,
"fillToAxis": "y",
"fillAlphas": 0.3,
"xField": "bx",
"yField": "by",
"lineColor": "#FCD202"
}, {
"balloonText": "x:[[cx]] y:[[cy]]",
"lineAlpha": 1,
"xField": "cx",
"yField": "cy",
"forcegap": true,
"lineColor": "#FCD202"
} ],
"marginLeft": 64,
"marginBottom": 60,
"chartScrollbar": {},
"chartCursor": {},
"export": {
"enabled": true,
"position": "bottom-right"
}
} );#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
} <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
答案 0 :(得分：1)
不幸的是，模拟XY图表类型中的间隙的唯一方法是为每个段创建单独的图形对象。这实际上会通过从下一组点开始创建一个全新的线来强制断开连接。以您的演示为例，您需要在cx＆gt;之后为后续值创建名为c2x和c2y的新属性。 10：
{
"ax": 11,
"ay": 10.4,
"bx": 11,
"by": 18.8,
"c2x": 11, //change from cx to c2x
"c2y": 14.5 //change from cy to c2y
}, {
"ax": 12,
"ay": 11.7,
"bx": 12,
"by": 21,
"c2x": 12,
"c2y": 16
}],
// ...
"graphs": [
// ...
{ //add new graph for the next segment
"balloonText": "x:[[c2x]] y:[[c2y]]",
"lineAlpha": 1,
"xField": "c2x",
"yField": "c2y",
"lineColor": "#FCD202"
}]
演示如下：
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"dataProvider": [ {
"ax": 1,
"ay": 0.5,
"bx": 1,
"by": 2.2,
"cx": 1,
"cy": 1
}, {
"ax": 2,
"ay": 1.3,
"bx": 2,
"by": 4.9,
"cx": 2,
"cy": 3
}, {
"ax": 3,
"ay": 2.3,
"bx": 3,
"by": 5.1,
"cx": 3,
"cy": 4.5
}, {
"ax": 4,
"ay": 2.8,
"bx": 4,
"by": 5.3,
"cx": 4,
"cy": 4
}, {
"ax": 5,
"ay": 3.5,
"bx": 5,
"by": 6.1,
"cx": 5,
"cy": 5
}, {
"ax": 6,
"ay": 5.1,
"bx": 6,
"by": 8.3,
"cx": 6,
"cy": 6.5
}, {
"ax": 7,
"ay": 6.7,
"bx": 7,
"by": 10.5
}, {
"ax": 8,
"ay": 8,
"bx": 8,
"by": 12.3
}, {
"ax": 9,
"ay": 8.9,
"bx": 9,
"by": 14.5
}, {
"ax": 10,
"ay": 9.7,
"bx": 10,
"by": 15
}, {
"ax": 11,
"ay": 10.4,
"bx": 11,
"by": 18.8,
"c2x": 11,
"c2y": 14.5
}, {
"ax": 12,
"ay": 11.7,
"bx": 12,
"by": 21,
"c2x": 12,
"c2y": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"dashLength": 1,
"id": "x",
"title": "X Axis"
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"id": "y",
"title": "Y Axis"
} ],
"startDuration": 1,
"graphs": [ {
"balloonText": "x:[[ax]] y:[[ay]]",
"fillAlphas": 0.3,
"fillToAxis": "x",
"lineAlpha": 1,
"xField": "ax",
"yField": "ay",
"lineColor": "#FF6600"
}, {
"balloonText": "x:[[bx]] y:[[by]]",
"lineAlpha": 1,
"fillToAxis": "y",
"fillAlphas": 0.3,
"xField": "bx",
"yField": "by",
"lineColor": "#FCD202"
}, {
"balloonText": "x:[[cx]] y:[[cy]]",
"lineAlpha": 1,
"xField": "cx",
"yField": "cy",
"lineColor": "#FCD202"
}, {
"balloonText": "x:[[c2x]] y:[[c2y]]",
"lineAlpha": 1,
"xField": "c2x",
"yField": "c2y",
"lineColor": "#FCD202"
} ],
"marginLeft": 64,
"marginBottom": 60,
"chartScrollbar": {},
"chartCursor": {},
"export": {
"enabled": true,
"position": "bottom-right"
}
} );#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>