我在点击之后使用spring作为webservice和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 );
}
答案 0 :(得分:0)
基于日期的图表上的数据点必须按升序排序。最早的,最新的。查看您的数据样本,似乎它们按降序排列。
要解决此问题,只需在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"
}
} );
&#13;
<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>
&#13;