amCharts串行圖表無法實現數據的解析「parseDates」後顯示的數據：真

Question

我使用Spring作爲web服務和擊球后JSON響應如下：

[ { 
    "date": "2016-04-17", 
    "open": 1085.0, 
    "high": 1092.2, 
    "low": 1072.0, 
    "close": 1088.3, 
    "volume": 54100, 
    "value": 1088.3 
}, { 
    "date": "2016-04-14", 
    "open": 1081.25, 
    "high": 1081.25, 
    "low": 1081.25, 
    "close": 1081.25, 
    "volume": 0, 
    "value": 1081.25 
} ] 

我試圖創建一個股票分析圖。當我設置"parseDates": false圖表顯示數據。但是，當然，日期不會被解析。當我將parseDates設置爲true時，它會停止顯示數據。

這裏是我的JavaScript代碼：

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "dataDateFormat": "YYYY-MM-DD", 
    "valueAxes": [ { 
    "position": "left" 
    } ], 
    "graphs": [ { 
    "id": "g1", 
    "proCandlesticks": true, 
    "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>", 
    "closeField": "close", 
    "fillColors": "#7f8da9", 
    "highField": "high", 
    "lineColor": "#7f8da9", 
    "lineAlpha": 1, 
    "lowField": "low", 
    "fillAlphas": 0.9, 
    "negativeFillColors": "#db4c3c", 
    "negativeLineColor": "#db4c3c", 
    "openField": "open", 
    "title": "Price:", 
    "type": "candlestick", 
    "valueField": "close" 
    } ], 
    "chartScrollbar": { 
    "graph": "g1", 
    "graphType": "line", 
    "scrollbarHeight": 30 
    }, 
    "chartCursor": { 
    "valueLineEnabled": true, 
    "valueLineBalloonEnabled": true 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
    "parseDates": false 
    }, 
    "dataProvider": resp, 
    "export": { 
    "enabled": true, 
    "position": "top-right" 
    } 
}); 

chart.addListener("rendered", zoomChart); 
zoomChart(); 


function zoomChart() { 
    chart.zoomToIndexes(chart.dataProvider.length - 50, chart.dataProvider.length - 1); 
} 

Answer 1

基於日期的圖上的數據點必須按升序排列。最早的，最新的。看看你的數據樣本，它似乎是在降序排列。

爲了解決這個問題只需撥打reverse()您resp陣列上：

resp.reverse(); 

工作演示：

/** 
 
* Source data 
 
*/ 
 
var resp = [ { 
 
    "date": "2016-04-17", 
 
    "open": 1085.0, 
 
    "high": 1092.2, 
 
    "low": 1072.0, 
 
    "close": 1088.3, 
 
    "volume": 54100, 
 
    "value": 1088.3 
 
}, { 
 
    "date": "2016-04-14", 
 
    "open": 1081.25, 
 
    "high": 1081.25, 
 
    "low": 1081.25, 
 
    "close": 1081.25, 
 
    "volume": 0, 
 
    "value": 1081.25 
 
} ]; 
 

 
/** 
 
* Reverse array 
 
*/ 
 
resp.reverse(); 
 

 
/** 
 
* Create chart 
 
*/ 
 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "valueAxes": [ { 
 
    "position": "left" 
 
    } ], 
 
    "graphs": [ { 
 
    "id": "g1", 
 
    "proCandlesticks": true, 
 
    "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>", 
 
    "closeField": "close", 
 
    "fillColors": "#7f8da9", 
 
    "highField": "high", 
 
    "lineColor": "#7f8da9", 
 
    "lineAlpha": 1, 
 
    "lowField": "low", 
 
    "fillAlphas": 0.9, 
 
    "negativeFillColors": "#db4c3c", 
 
    "negativeLineColor": "#db4c3c", 
 
    "openField": "open", 
 
    "title": "Price:", 
 
    "type": "candlestick", 
 
    "valueField": "close" 
 
    } ], 
 
    "chartScrollbar": { 
 
    "graph": "g1", 
 
    "graphType": "line", 
 
    "scrollbarHeight": 30 
 
    }, 
 
    "chartCursor": { 
 
    "valueLineEnabled": true, 
 
    "valueLineBalloonEnabled": true 
 
    }, 
 
    "categoryField": "date", 
 
    "categoryAxis": { 
 
    "parseDates": true 
 
    }, 
 
    "dataProvider": resp, 
 
    "export": { 
 
    "enabled": true, 
 
    "position": "top-right" 
 
    } 
 
});

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv" style="height: 200px"></div>