AM 图表未正确显示日期轴答案

【问题标题】：AM chart not showing the date axis correctlyAM 图表未正确显示日期轴
【发布时间】：2014-10-03 11:20:56
【问题描述】：

我对 AM 图表完全陌生，尝试使用提供的数据源构建条形图和折线图，并将类别轴作为日期并设置 parseDates=true。在渲染图表时，月份似乎在变化。对于给定的数据，当向下钻取到几个月时，假设四月条位于五月网格线上（如图所示），当在年度视图中十二月位于明年网格线上（十二月2004 年与 2005 年相同）。有办法解决吗？

我的类别轴如下

            "categoryAxis": {
                "minPeriod": "hh",
                "parseDates": true,
                "labelRotation": 45,
               "labelOffset": 0,
              "centerLabelOnFullPeriod": false,
               "dateFormats": [ 
                               {period:'hh',format:'JJ:NN'},
                                {period:'DD',format:'MMM DD'},
                               {period:'WW',format:'MMM DD'},
                               {period:'MM',format:'MMM YYYY'},
                               { period: 'YYYY', format: 'YYYY' }],

非常感谢您对此的任何帮助，

JSFiddle 已提供

【问题讨论】：

标签： javascript jquery charts amcharts

【解决方案1】：

查看您的数据后，我可以看到，当您在图表中添加数据时，您会在该月的最后一天放置一个值。如果您可以将该值设置为每个月的第一天，那么您将获得按您想要的方式显示的数据。

例如，而不是使用...

{ "DateField": "2009-05-31T00:00:00", "Value1": 126.00, "Value2": -46.00, "Value3": 80.00, "Value4": 172.00 }
{ "DateField": "2009-06-30T00:00:00", "Value1": 132.00, "Value2": -49.00, "Value3": 83.00, "Value4": 181.00 }

改用这个...

{ "DateField": "2009-05-01T00:00:00", "Value1": 126.00, "Value2": -46.00, "Value3": 80.00, "Value4": 172.00 }
{ "DateField": "2009-06-01T00:00:00", "Value1": 132.00, "Value2": -49.00, "Value3": 83.00, "Value4": 181.00 }

我还发现您的图形组件中有错误。您将 lineThickness 拼写为 liValue3hickness

            {
                "balloonText": "[[title]]: [[value]]% ([[category]])",
                "liValue3hickness": 3,     /*SHOULD BE "lineThickness" : 3,*/
                "title": "Value3",
                "valueField": "Value3",
                "lineColor": "#FFC000"
            }

【讨论】：

感谢 Simon 的回复，我实际上无法更改数据，谢谢指出错字 liValue3hickness，

【解决方案2】：

我将列宽更改为“columnWidth”：0.5，设置“minPeriod”：“MM”和“dateFormats”：[

                                {period:'MM',format:'MMM YYYY'},
                                { period: 'YYYY', format: 'YYYY' }],

它对我有用，感谢西蒙帮助我，你给了我洞察力，

【讨论】：

【解决方案3】：

尝试添加equalSpacing属性

categoryAxis: {
  parseDates: true,
  equalSpacing: true,
}

要手动调整大小，请使用columnWidth

graphs: [{
  type: 'column',
  columnWidth: .5 // Half of a full column
}]

【讨论】：