Question

我使用AmCharts显示图表。它是一个浮动条形图，显示向用户发送的调查。条形代表openFrom到openUntil时间，即用户提交调查的时间窗口。他们在时间表中列出。我希望AmCharts能够理解x轴有日期作为数据类型，所以我可以利用日期函数（相对间距，显示年份变化粗体，滚动时间等）

以下数据用于绘制图表，如屏幕截图所示：

[{
    "survey":"Survey DEF",
    "openFrom":"05-04-2016",
    "openUntil":"04-05-2016",
    "status":"Nog niet geopend.", // translates to Not opened yet
    "color":"#ededed"
 },{
    "survey":"Survey DEF",
    "openFrom":"01-01-2016",
    "openUntil":"31-01-2016",
    "status":"Nog niet geopend.",
    "color":"#ededed"
 },{
    "survey":"Survey GHI",
    "openFrom":"06-12-2015",
    "openUntil":"31-12-2015",
    "status":"Ingestuurd op 07-12-2015", // Translates to Submitted at 07-12-2015
    "color":"#27ae60"
 },{
    "survey":"Survey ABC",
    "openFrom":"01-12-2015",
    "openUntil":"15-12-2015",
    "status":"Geopend, nog geen reactie.", // Translates to Opened, not submitted yet
    "color":"#e67e22"
 },{
    "survey":"Survey GHI",
    "openFrom":"31-01-2015",
    "openUntil":"05-05-2015",
    "status":"Geen reactie ontvangen", // Translates to Not submitted
    "color":"#c0392b"
}]

使用此代码：

var chart = AmCharts.makeChart('chart-container', {
    'type': 'serial',
    'dataLoader': {
       'url': urlToJSONFetchScript
    },
    'language': 'nl',
    'categoryAxis': {
        'position': 'right',
        'axisAlpha': 0.2,
        'gridAlpha': 0.05
    },
    'valueAxes': [{
        'type': 'date',
        'minimumDate': '31-01-2015',
        'maximumDate': '04-05-2016',
        'axisAlpha': 0.2,
        'gridAlpha': 0.05
    }],
    'categoryField': 'survey',
    'graphs': [{
        'balloonText': '<div style="text-align: left"><strong>[[survey]]</strong><small><br/>[[openFrom]] - [[openUntil]]<br/>[[status]]</small></div>',
        'type': 'column',
        'dateFormat': 'DD-MM-YYYY',
        'openField': 'openFrom',
        'valueField': 'openUntil',
        'colorField': 'color',
        'lineColorField': 'color',
        'fillAlphas': 0.65,
        'lineAlpha': 0.95
    }],
    'rotate': true,
    'dataDateFormat': 'DD-MM-YYYY'
});

这是我的图表：

这一切看起来不错，但是我想使用parseDates，x轴没有字符串标签，但相对传播日期并显示年份变化。当我将'parseDates': true添加到categoryAxis时，图表会旋转并显示错误。我已经在API documentation搜索了一段时间，但我无法找到任何解决方案。我错过了什么？

在categoryAxis选项中将parseDates设置为true的结果：

Answer 1

如果我理解正确，问题是您需要显示所有月份标签以及1月份的年份。

为此，您需要设置boldPeriodBeginning: true以及markPeriodChange: true来显示年份而非1月标签。

要使图表显示所有月份，您还需要通过设置autoGridCount: false来停用自动网格，并将gridCount设置为更大的数字，例如25。

请注意，这是 Value Axis 的全部内容。为类别轴启用解析日期没有多大意义，因为您有任意类别，喜欢＆＃34;调查DEF＆＃34;。

'valueAxes': [ {
  'type': 'date',
  'minimumDate': '31-01-2015',
  'maximumDate': '04-05-2016',
  'autoGridCount': false,
  'gridCount': 25,
  'boldPeriodBeginning': true,
  'markPeriodChange': true,
  'axisAlpha': 0.2,
  'gridAlpha': 0.05
} ]

这里有live chart，但有上述变化。

从JavaScript图表V3.18开始，也可以使值轴可滚动。要启用它，请使用图表的valueScrollbar属性。即：

"valueScrollbar": {
  "oppositeAxis": false,
  "offset": 50,
  "scrollbarHeight": 10
}

它是ChartScrollbar的一个实例，因此您可以使用此课程中提供的任何属性。

AmCharts parseDates意外行为并合并图表

1 个答案: