X 轴上带有日期的 AmCharts 浮动条

Question

我有很多项目（在我的案例中是调查）具有一定的 "opened time"。使用 AmCharts 我想将所有随时间推移的调查显示为浮动条形图。浮动条的开始应该是调查开放填写的日期，条的结束应该是该调查的 openUntil 日期。

我正在阅读 API documentation and am trying to combine the examples for a Floating bar chart and 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 中的日期是从零开始的。所以 1 月是 0，12 月是 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'
});

X 轴上带有日期的 AmCharts 浮动条

AmCharts floating bar with dates on x-axis

javascript

charts

amcharts