Question

我正在尝试使用Amchart和Angular js绘制图表。我的数据数组对象包含字符串形式的日期。问题是amchart的dataDateFormat无法按要求工作。

例如- 在我的数据对象中

{
"date": "2012-07-27 11:33",
 "value": 18
}

使用Amchart代码

"dataDateFormat": "JJ:NN" or     "dataDateFormat": "YYYY-MM-DD JJ:NN"

将单线显示为图形。

下面是js代码

angular.module("ctrl", ['ui.bootstrap']).controller("mindCtrl", 
function($scope) {
$scope.makaDaCharto = function(index) {
$scope.chart = AmCharts.makeChart("chartdiv" + index, {
  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": true,
  "dataDateFormat": "JJ:NN",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff"
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
  }],
  "chartScrollbar": {
    "graph": "g1",
    "oppositeAxis": false,
    "offset": 30,
    "scrollbarHeight": 80,
    "backgroundAlpha": 0,
    "selectedBackgroundAlpha": 0.1,
    "selectedBackgroundColor": "#888888",
    "graphFillAlpha": 0,
    "graphLineAlpha": 0.5,
    "selectedGraphFillAlpha": 0,
    "selectedGraphLineAlpha": 1,
    "autoGridCount": true,
    "color": "#AAAAAA"
  },
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
    "valueZoomable": true
  },
  "valueScrollbar": {
    "oppositeAxis": false,
    "offset": 50,
    "scrollbarHeight": 10
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
    "date": "2012-07-27 11:22",
    "value": 13
  }, {
    "date": "2012-07-27 11:23",
    "value": 11
  }, {
    "date": "2012-07-27 11:24",
    "value": 15
  }, {
    "date": "2012-07-27 11:25",
    "value": 16
  }, {
    "date": "2012-07-27 11:26",
    "value": 18
  }, {
    "date": "2012-07-27 11:27",
    "value": 13
  }, {
    "date": "2012-07-27 11:28",
    "value": 22
  }, {
    "date": "2012-07-27 11:29",
    "value": 23
  }, {
    "date": "2012-07-27 11:30",
    "value": 20
  }, {
    "date": "2012-07-27 11:31",
    "value": 17
  }, {
    "date": "2012-07-27 11:32",
    "value": 16
  }, {
    "date": "2012-07-27 11:33",
    "value": 18
  }, {
    "date": "2012-07-27 11:34",
    "value": 21
  }, {
    "date": "2012-07-27 11:35",
    "value": 26
  }, {
    "date": "2012-07-27 11:36",
    "value": 24
  }, {
    "date": "2012-07-27 11:37",
    "value": 29
  }, {
    "date": "2012-07-27 11:38",
    "value": 32
  }, {
    "date": "2012-07-27 11:39",
    "value": 18
  }, {
    "date": "2012-07-27 11:40",
    "value": 24
  }, {
    "date": "2012-07-27 11:41",
    "value": 22
  }, {
    "date": "2012-07-27 11:42",
    "value": 18
  }, {
    "date": "2012-07-27 11:43",
    "value": 19
  }, {
    "date": "2012-07-27 11:44",
    "value": 14
  }, {
    "date": "2012-07-27 11:45",
    "value": 15
  }, {
    "date": "2012-07-27 11:46",
    "value": 12
  }, {
    "date": "2012-07-27 11:47",
    "value": 8
  }, {
    "date": "2012-07-27 11:48",
    "value": 9
  }, {
    "date": "2012-07-27 11:49",
    "value": 8
  }, {
    "date": "2012-07-27 11:50",
    "value": 7
  }, {
    "date": "2012-07-27 11:51",
    "value": 5
  }, {
    "date": "2012-07-27 11:52",
    "value": 11
  }, {
    "date": "2012-07-27 11:53",
    "value": 13
  }, {
    "date": "2012-07-27 11:54",
    "value": 18
  }]
});

$scope.chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
  $scope.chart.zoomToIndexes($scope.chart.dataProvider.length - 40, 
$scope.chart.dataProvider.length - 1);
}
};

});

Amchart Curve by editing fiddle

现有示例在http://jsfiddle.net/v917yya3/68/摆弄

我创建的提要来描述问题http://jsfiddle.net/phex4qg5/

PS-我已经尝试过

amCharts with AngularJS
JSON with parsed time or timestamp to amCharts
此处http://www.amcharts.com/kbase/formatting-dates/

Answer 1

AmCharts假定默认情况下您的数据是每天间隔的。由于您的数据以分钟为间隔，因此您需要调整类别轴的minPeriod以适应此情况。根据您的情况，设置minPeriod: "mm"以及设置dataDateFormat: "YYYY-MM-DD JJ:NN"都会修复图表。

更新的小提琴：http://jsfiddle.net/phex4qg5/10/

图形上的amcharts（v3.x）日期格式问题

1 个答案: