AmCharts parseDates 意外行为并合并图表中的所有条形图

Question

我正在使用 AmCharts 来显示图表。它是一个浮动条形图，显示向用户发送的调查。条形代表 openFrom 到 openUntil 时间，即用户必须提交调查的时间 window。它们在时间轴中列出。我希望 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

如果我没理解错的话，问题是您需要显示所有月份标签，以及一月份的年份。

为此，您需要设置 boldPeriodBeginning: true 和 markPeriodChange: true 以显示年份而不是一月标签。

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

请注意，这都是针对值轴的。为类别轴启用日期解析没有多大意义，因为您有任意类别，像 "Survey DEF".

'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 Charts 的 V3.18 开始，也可以使值轴可滚动。要启用它，请使用图表的 valueScrollbar 属性。即：

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

它是 ChartScrollbar 的实例，因此您可以使用此 class 中可用的任何属性。

AmCharts parseDates 意外行为并合并图表中的所有条形图

AmCharts parseDates unexpected behavior and merges all bars from the chart

javascript

charts

amcharts