javascript - X 轴上带有日期的 AmCharts float 条

Question

我有很多项目(在我的案例中是调查)有一定的“开放时间”。使用 AmCharts 我想将所有随时间推移的调查显示为 float 条形图。 float 条的开始应该是调查开放填写的日期，条的结束应该是该调查的 openUntil 日期。

我正在阅读 API documentation并尝试将示例组合成一个 Floating bar chart和 XY chart with date based axis .虽然我的 y 轴填充了已注册的调查，但 float 条(以及 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 轴上绘制一段时间内日期边界的 float 条形图有什么建议吗？

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'
});