AmCharts 浮动条在 x 轴上显示日期

Question

我有许多具有特定“开放时间”的项目（在我的案例中是调查）。使用 AmCharts 我想将一段时间内的所有调查显示为浮动条形图。浮动条的开始应该是调查开放填写的日期，条的结束应该是该调查的 openUntil 日期。

我正在阅读API documentation 并尝试将Floating bar chart 和XY chart with date based axis 的示例结合起来。虽然我的 y 轴填充了已注册的调查，但浮动条（以及 x 轴）不会显示。

dataLoader 插件获取以下数据：

[{
    "survey":"Test Survey 2",
    "openFrom":"2016-08-01",
    "openUntil":"2016-08-31",
    "color":"#ff9900"
 },
 {
    "survey":"Test Survey 1",
    "openFrom":"2016-05-06",
    "openUntil":"2016-06-06",
    "color":"#ff9900"
}]

我目前的实现代码：

var chart = AmCharts.makeChart('chart-container', {
    'type' : 'serial',
    'dataLoader' : {
        'url' : urlToFetchDataFrom
    },
    'language': 'nl',
    'categoryAxis' : {
        'position': 'right'
    },
    'valueAxis' : [{
        'type': 'date',
        'minimumDate': new Date(2016, 1, 1),
        'minimumDate': new Date(2016, 12, 31)
    }],
    'categoryField' : 'survey',
    'graphs' : [{
        'type': 'column',
        'dateFormat': 'YYYY-MM-DD',
        'openField' : 'openFrom',
        'valueField' : 'openUntil'
    }],
    'rotate': true,
    'dataDateFormat': 'YYYY-MM-DD'
});

图表呈现为：

关于如何制作一个浮动条形图，在 x 轴上绘制一段时间内的日期边界有什么建议吗？

Answer 1

您的代码存在一些问题，导致图表无法正确显示：

1) valueAxes 拼写错误为“valueAxis”。

2) 你设置了两次minimumDate。第二个应该是maximumDate。

3) JavaScript 中的日期是从零开始的。所以一月是 0，十二月 - 11。

以下代码应使图表按预期显示：

var chart = AmCharts.makeChart('chart-container', {
    'type' : 'serial',
    'dataLoader' : {
        'url' : urlToFetchDataFrom
    },
    'language': 'nl',
    'categoryAxis' : {
        'position': 'right'
    },
    'valueAxes' : [{
        'type': 'date',
        'minimumDate': new Date(2016, 0, 1),
        'maximumDate': new Date(2016, 11, 31)
    }],
    'categoryField' : 'survey',
    'graphs' : [{
        'type': 'column',
        'dateFormat': 'YYYY-MM-DD',
        'openField' : 'openFrom',
        'valueField' : 'openUntil'
    }],
    'rotate': true,
    'dataDateFormat': 'YYYY-MM-DD'
});