0

The problem is what you see in the chart: http://www.fanta-trade.eu/chart.php?tipo=f&code=1450018272

The chart is not showing correctly the data according with the date.

The code probably might be here:

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();

Full code:

AmCharts.ready( function() {
  createStockChart();
} );

var chartData = [];
    chartData.push({ date: new Date(2015, 11, 15, 13, 59, 0, 0), value: 203.84, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 13, 36, 0, 0), value: 203.86, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 59, 0, 0), value: 203.86, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 37, 0, 0), value: 203.81, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 11, 0, 0), value: 203.8, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 11, 34, 0, 0), value: 203.79, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 4, 47, 0, 0), value: 203.68, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 21, 41, 0, 0), value: 202.64, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 18, 16, 0, 0), value: 199.73, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 17, 52, 0, 0), value: 197.94, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 17, 22, 0, 0), value: 199.83, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 13, 11, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 8, 54, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 8, 0, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 2, 11, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 1, 13, 0, 0), value: 198.56, volume: 1 });

var chart;

function createStockChart() {
  chart = new AmCharts.AmStockChart();

  // DATASETS //////////////////////////////////////////
  var dataSet = new AmCharts.DataSet();
  dataSet.color = "#000000";
  dataSet.fieldMappings = [{
    fromField: "value",
    toField: "value"
  }, {
    fromField: "volume",
    toField: "volume"
  }];

  dataSet.dataProvider = chartData;
  dataSet.categoryField = "date";

  // set data sets to the chart
  chart.dataSets = [dataSet];

  // PANELS ///////////////////////////////////////////
  // first stock panel
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = false;
  stockPanel1.title = "Price";
  stockPanel1.percentHeight = 70;

  // graph of first stock panel
  var graph1 = new AmCharts.StockGraph();
  graph1.valueField = "value";
  graph1.type = "smoothedLine";
  graph1.bullet = "round";
  graph1.lineThickness = 2;
  graph1.bulletBorderColor = "#FFFFFF";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 3;
  stockPanel1.addStockGraph(graph1);

  // create stock legend
  var stockLegend1 = new AmCharts.StockLegend();
  stockLegend1.valueTextRegular = " ";
  stockLegend1.markerType = "none";
  stockPanel1.stockLegend = stockLegend1;

  // second stock panel
  var stockPanel2 = new AmCharts.StockPanel();
  stockPanel2.title = "Volume";
  stockPanel2.percentHeight = 30;
  var graph2 = new AmCharts.StockGraph();
  graph2.valueField = "volume";
  graph2.type = "column";
  graph2.fillAlphas = 1;
  stockPanel2.addStockGraph(graph2);

  // set panels to the chart
  chart.panels = [stockPanel1];

  // OTHER SETTINGS ////////////////////////////////////
  var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
  scrollbarSettings.graph = graph1;
  chart.chartScrollbarSettings = scrollbarSettings;

  var cursorSettings = new AmCharts.ChartCursorSettings();
  cursorSettings.valueBalloonsEnabled = true;
  cursorSettings.graphBulletSize = 1;
  chart.chartCursorSettings = cursorSettings;

  var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
  categoryAxesSettings.minPeriod="mm";
  chart.categoryAxesSettings = categoryAxesSettings;

  // PERIOD SELECTOR ///////////////////////////////////
  var periodSelector = new AmCharts.PeriodSelector();
  periodSelector.periods = [{
    period: "DD",
    count: 10,
    label: "10 days"
  }, {
    period: "MM",
    count: 1,
    selected: true,
    label: "1 month"
  }, {
    period: "YYYY",
    count: 1,
    label: "1 year"
  }, {
    period: "YTD",
    label: "YTD"
  }, {
    period: "MAX",
    label: "MAX"
  }];
  chart.periodSelector = periodSelector;

  var panelsSettings = new AmCharts.PanelsSettings();
  panelsSettings.marginRight = 16;
  panelsSettings.marginLeft = 16;
  panelsSettings.usePrefixes = true;
  chart.panelsSettings = panelsSettings;

  dataSet.stockEvents = [];

  chart.write('chartdiv');
}
4

1 回答 1

2

这个问题其实很简单。

amCharts 中的数据必须按升序排列。当你有它在下降时，这会产生各种异常。

要修复，只需按升序添加数据点。例如使用unshift()而不是push().

或者只是reverse()结果数组：

chartData.reverse();

这是带有反转数据的相同图表：http: //codepen.io/team/amcharts/pen/5d2891ce1710ce06dae34bebc2db8644

于 2015-12-16T05:56:41.757 回答