Am图表显示不正确,这是下面的ajax代码,图表的拇指不正确。 我正在使用ajax获取响应并初始化amchart(区域)
Ajax json响应数据
{"success":true,"graph_data":[{"date":"2018-06-21","value":121.65},{"date":"2018-06-20","value":121.65},{"date":"2018-06-19","value":121.5},{"date":"2018-06-18","value":121.3},{"date":"2018-06-17","value":120.55},{"date":"2018-06-16","value":119.84},{"date":"2018-06-14","value":119.88}],"min_period":"DD","message":null}
这里是我为amchart初始化的代码
var chart = AmCharts.makeChart( "graph_chart_div", {
"type": "serial",
"theme": "light",
"marginRight": 5,
"marginLeft": 5,
"minPeriod":response.min_period,
"autoMarginOffset": 5,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
} ],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [ {
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
} ],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45,
"minorGridEnabled": true,
/* ENSURE 2 LINES BELOW ARE ADDED */
"autoGridCount": false,
"gridCount": 12,
"parseDates": true,
"dashLength": 1,
// "minorGridEnabled": true
},
"export": {
"enabled": false
},
// "dataProvider": graph_data
"dataProvider": response.graph_data
} );
这是当前已初始化的图表
我想为我的数据显示以下图表
答案 0 :(得分:2)
您的日期数据不正确。 AmCharts要求使用parseDates
时,基于日期的数据必须按日期升序排列。
重要:如果将其设置为
true
,则数据点需要按升序进行预排序。顺序不正确的数据可能会导致图表出现视觉和功能故障。
确定排序顺序后,图表将正确显示。