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

Question

我正在使用 AmCharts 来显示图表。它是一个 float 条形图，显示向用户发送的调查。这些条代表 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 zo x 轴没有字符串标签，但相对分散日期并显示年份变化。当我将 'parseDates': true 添加到 categoryAxis 时，图表会旋转并呈现错误。我一直在 API documentation 中搜索一段时间但我找不到任何解决方案。我错过了什么？

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

Answer 1

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

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

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

请注意，这都是针对值轴的。启用类别轴日期解析没有多大意义，因为您有任意类别， 例如“调查 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 的一个实例，因此您可以使用此类中可用的任何属性。