amCharts「parseDates」を解析したデータを有効にした後、データを表示することができませんでしシリアルチャート：私が打った後、WebサービスおよびJSONレスポンスとしてのバネを使用しています真

Question

は以下の通りです：

[ { 
    "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

日付ベースのチャートのデータポイントを昇順で注文する必要があります。最も古いもの、最も新しいもの。あなたのデータサンプルを見ると、降順であるようです。

それは単にあなたのrespアレイ上reverse()を呼び出す修正するには：

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>