Question

我有很多项目（在我的案例中是调查），有一定的开放时间＆＃34;。使用AmCharts我希望将所有调查随时间显示为浮动条形图。浮动栏的开头应该是调查开放填写的日期，栏的结尾应该是该调查的开放日期。

我正在阅读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拼写错误为＆＃34; valueAxis＆＃34;。

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

AmCharts浮动条，在x轴上有日期

1 个答案: