Question

我正在使用平滑线图，我想保留最后一颗子弹，但不是线，我想保持子弹没有连接器。这是否可以在不搞乱数据的情况下实现？

please see my [jsfiddle][1]

[1]: https://jsfiddle.net/pbarros/0qj8bLo2/4/

Answer 1

如果不对数据进行细微修改，则无法执行此操作。您可以在图形对象中指定gapField以指向数据集中的布尔字段，该字段指示该点是否会从自身到下一个点产生间隙。例如：

"dataProvider": [
// ...
{
"date": "2016-09-01T00:00:00",
"value1": 78,
"value2gap": true, //disconnect this point from the next point
"value2": 47
},
{
"date": "2016-10-01T00:00:00",
"value1": 11,
"value2": 8
}],
"graphs": [{
  // ...
  "gapField": "value2gap"
}]

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "fontFamily": "Roboto",
  "theme": "light",
  "dataProvider": [{
    "date": "2016-04-01T00:00:00",
    "value1": 236,
    "value2": 70
  }, {
    "date": "2016-05-01T00:00:00",
    "value1": 160,
    "value2": 60
  }, {
    "date": "2016-06-01T00:00:00",
    "value1": 59,
    "value2": 22
  }, {
    "date": "2016-07-01T00:00:00",
    "value1": 77,
    "value2": 32
  }, {
    "date": "2016-08-01T00:00:00",
    "value1": 48,
    "value2": 37
  }, {
    "date": "2016-09-01T00:00:00",
    "value1": 78,
    "value2gap": true,
    "value2": 47
  }, {
    "date": "2016-10-01T00:00:00",
    "value1": 11,
    "value2": 8
  }],
  "autoMargins": false,
  "marginTop": 30,
  "marginBottom": 10,
  "marginLeft": 50,
  "autoMargins": true,
  "dataDateFormat": "YYYY-MM-DD",
  "addClassNames": true,
  "legend": {
    "align": "center",
    "equalWidths": false,
    "valueAlign": "left",
    "valueText": "[[value]]",
    "valueWidth": 70,
    "autoMargins": false,
    "marginBottom": 10,
    "marginLeft": 50,
    "switchable": false,
    "markerType": "circle"

  },
  "colors": ["red"],
  "valueAxes": [{
    "id": "v2",
    "axisThickness": 2,
    "gridAlpha": 0.15,
    "axisAlpha": 0,
    "title": "Total Count",
    "titleColor": "#444d58",
    "position": "left"
      //"minMaxMultiplier": 1.10
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
    "color": "#71799c"
  },
  "graphs": [{
    "balloonText": "total count : [[value]]",
    "id": "cat2",
    "title": "total count",
    "valueField": "value2",
    "valueAxis": "v2",
    "type": "smoothedLine",
    "bullet": "round",
    "bulletSize": 8,
    "lineThickness": 3,
    "lineAlpha": 0.5,
    "bulletBorderAlpha": 1,
    "bulletAlpha": 1,
    "bulletColor": "#ffffff",
    "bulletBorderColor": "red",
    "bulletBorderThickness": 3,
    "valueAxisColor": "#444d58",
    "gapField": "value2gap"
  }],
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0.5,
    "valueLineAlpha": 0.5,
    "cursorColor": "#1895ff",
    "categoryBalloonDateFormat": 'MMM YYYY',
  },
  "categoryField": "date",
  "categoryAxis": {
    "minPeriod": "MM",
    "parseDates": true,
    "dashLength": 1,
    "dateFormats": [{
      period: 'fff',
      format: 'JJ:NN:SS'
    }, {
      period: 'ss',
      format: 'JJ:NN:SS'
    }, {
      period: 'mm',
      format: 'JJ:NN'
    }, {
      period: 'hh',
      format: 'JJ:NN'
    }, {
      period: 'DD',
      format: 'DD MMM YY'
    }, {
      period: 'WW',
      format: 'MMM DD'
    }, {
      period: 'MM',
      format: 'MMM YYYY'
    }, {
      period: 'YYYY',
      format: 'YYYY'
    }],
    "minorGridEnabled": true
  }
});

<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" style="width: 100%; height: 500px;"></div>

amCharts保留最后一个子弹，但不是连接最后两个的线

1 个答案: