AmCharts - 使用＆＃34; connect：false＆＃34;通过跳过多行图的空值

Question

如果指定的"type": "serial"变量之间有任何点，我想连接折线图（minPeriod）。

例如考虑以下数据集

[
 {
  "date":"2017-07-15 01:01:01",
  "value1":"12",
  "value2":null
 },
 {
  "date":"2017-07-15 01:01:41",
  "value1":null,
  "value2":"20"
 },
 {
  "date":"2017-07-15 01:02:01",
  "value1":"12",
  "value2":null
 },
 {
  "date":"2017-07-15 01:02:41",
  "value1":null,
  "value2":"20"
 }
]

在图中，我正在使用

"connect":false

和

"gapPeriod":60
"minPeriod":"ss"

当前结果： 目前的结果是value1＆amp;的差距图表。 value2

预期结果 当value1在minPeriod*gapPeriod时间范围内有两个点时获得连通图。

Answer 1

任何具有null / undefined值的点都会在connect设置为false时创建间隙，无论后面的下一个点是否在gapPeriod内，因为null / undefined值被视为数据中的明显差距。您希望将connect设置为true，并在图表中启用forceGap。请注意，当您的数据为＆gt; = minPeriod * gapPeriod时，您可能希望调整gapPeriod，因为差距会触发。

＆＃13;

＆＃13;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
      "date": "2017-07-15 01:01:01",
      "value1": "12",
    }, {
      "date": "2017-07-15 01:01:41",
      "value2": "20"
    }, {
      "date": "2017-07-15 01:02:01",
      "value1": "12",
    }, {
      "date": "2017-07-15 01:02:41",
      "value2": "20",
    }, {
      "date": "2017-07-15 01:03:51",
      "value1": "12",
      "value2": "20",
    }, {
      "date": "2017-07-15 01:04:31",
      "value1": "12",
      "value2": "20"
    },
    {
      "date": "2017-07-15 01:04:41",
      "value1": "12"
    }, {
      "date": "2017-07-15 01:04:51",
      "value1": "12"
    }, {
      "date": "2017-07-15 01:05:01",
      "value1": "12"
    }, {
      "date": "2017-07-15 01:05:11",
      "value1": "12",
      "value2": "20"
    }
  ],
  "startDuration": 1,
  "graphs": [{
    "valueField": "value1",
    "bullet": "round",
    "gapPeriod": 61,
    "forceGap": true
  }, {
    "valueField": "value2",
    "bullet": "square",
    "gapPeriod": 61,
    "forceGap": true
  }],
  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "ss"
  }
});

＆＃13;

#chartdiv {
  width: 100%;
  height: 300px;
}

＆＃13;

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

＆＃13;

＆＃13;

＆＃13;