启用数据解析后 amCharts Serial Chart 无法显示数据 "parseDates": true

Question

我正在使用 spring 作为网络服务并且 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

基于日期的图表上的数据点必须按升序排列。最旧的在前，最新的在后。看你的数据样本，好像是降序排列的。

要解决这个问题，只需在 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>

启用数据解析后 amCharts Serial Chart 无法显示数据 "parseDates": true

amCharts Serial Chart unable to display data after enabling data parsing "parseDates": true

javascript

spring

json

amcharts