启用数据解析后，串行图无法显示数据parsedates: true

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

本文关键字：数据 显示 true parsedates 启用      更新时间：2023-09-26

我使用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 );
}

基于日期的图表中的数据点必须按升序排列。最老的先，最新的后。看一下你的数据样本，它们似乎是按降序排列的。

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

相关文章：