Question

我正在尝试根据amcharts构建一个甘特图。我可能每行只有一个项目，所以我尝试使用示例_JSON_ganttDateBased但当我每行只留下一个项目（John，Smith和Ben每个只有一个任务），X轴恢复到时间而不是约会。

我看着浮动酒吧作为一种可能的方式，但我不确定我可以在轴上放置日期。

由于

Answer 1

这是因为总时间跨度很小，并且有足够的空间将网格线/标签放在X轴上。因此图表会恢复为线条。

通过将值轴的粒度强制为每日：

，可以轻松解决此问题

"valueAxis": {
  "type": "date",
  "minPeriod": "DD"
}

这应该将你的轴增量恢复到几天。

这是一个有效的例子：

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "gantt",
  "period": "DD",

  "valueAxis": {
    "type": "date",
    "minPeriod": "DD"
  },
  "brightnessStep": 10,
  "graph": {
    "fillAlphas": 1,
    "balloonText": "[[open]] - [[value]]"
  },
  "rotate": true,
  "categoryField": "category",
  "segmentsField": "segments",
  "dataDateFormat": "YYYY-MM-DD",
  "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
    "category": "John",
    "segments": [ {
      "start": "2015-01-02",
      "end": "2015-01-03"
    } ]
  }, {
    "category": "Smith",
    "segments": [ {
      "start": "2015-01-01",
      "end": "2015-01-02"
    } ]
  }, {
    "category": "Ben",
    "segments": [ {
      "start": "2015-01-06",
      "end": "2015-01-09"
    } ]
  } ],
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true
  },

  "chartScrollbar": {

  }
} );

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

amcharts甘特轴恢复到时间而不是日期

1 个答案: