javascript - amcharts 甘特图轴恢复为时间而不是日期

Question

我正在尝试基于 amcharts 构建甘特图。不过，我可能每行只有一个项目，所以我尝试使用示例 _JSON_ganttDateBased 但当我每行只留下一个项目(John、Smith 和 Ben 每人只有一个任务)时，X 轴恢复为时间而不是日期。

我研究了 float 栏作为一种可能的方法，但我不确定是否可以将日期放在轴上。

谢谢

Answer 1

发生这种情况是因为总时间跨度很小，并且有足够的空间可以在 X 轴上放置网格线/标签。因此图表恢复为线条。

通过将值(value)轴的粒度强制为每日可以轻松解决此问题:

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