Question

问题出在图表中：http://www.fanta-trade.eu/chart.php?tipo=f&code=1450018272

图表未按日期正确显示数据。

代码可能在这里：

var categoryAxesSettings = new AmCharts.CategoryAxesSettings（）;

完整代码：

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');
}

Answer 1

实际上问题很简单。

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

要修复，只需按升序添加数据点即可。例如，使用unshift()代替push()。

或简单地reverse()结果数组：

chartData.reverse();

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

amCharts，日内数据显示不正确

1 个答案: