amcharts - 如何在xychart中有间隙

Question

它在 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>							

Answer 1

不幸的是，在 XY 图表类型中模拟间隙的唯一方法是为每个段创建单独的图形对象。这将通过从下一组点开始创建一条全新的线来强制断开连接。以您的演示为例，您需要为 cx > 10 之后的后续值创建名为 c2x 和 c2y 的新属性:

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