Question

我试图动态地将数据推送到amcharts中的dataProvider XY图表，但我无法实现这一点。

我的图表没有被绘制。我的x轴为月，y轴为数字值。

我试过这样的事情声明了所有月份和总数组。我的obj看起来像这样：

 dataProviderObj{(date : 2015-Jan , y :80 , value :80 ),(date : 2015-Feb , y :70 , value :70)}; 
 dataProviderObj={};

我试图像这样推动

for(i=0;i<=month.length;i++){
dataProviderObj.push{(
"date" : month[i],
"y"    : total[i],
"value"  : total[i]
)}
}
dataprovider.push(dataProviderObj);

var chart = AmCharts.makeChart("chartdiv", {
    "type": "xy",
    "theme": "light",
    "marginRight": 80,
    "dataDateFormat": "YYYY-MMM",
    "startDuration": 1.5,
    "trendLines": [],
    "balloon": {
        "adjustBorderColor": false,
        "shadowAlpha": 0,
        "fixedPosition":true
    },
    "graphs": [{
        "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
        "bullet": "diamond",
        "id": "AmGraph-1",
        "lineAlpha": 0,
        "lineColor": "#b0de09",
        "fillAlphas": 0,
        "valueField": "value",
        "xField": "date",
        "yField": "y"
    }, {
        "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
        "bullet": "round",
        "id": "AmGraph-2",
        "lineAlpha": 0,
        "lineColor": "#fcd202",
        "fillAlphas": 0,
        "valueField": "bValue",
        "xField": "date",
        "yField": "by"
    }],
    "valueAxes": [{
        "id": "ValueAxis-1",
        "axisAlpha": 0
    }, {
        "id": "ValueAxis-2",
        "axisAlpha": 0,
        "position": "bottom",
        "type": "date",
        "minimumDate": new Date(2015, 0, 01),
        "maximumDate": new Date(2015, 12, 13)
    }],
    "allLabels": [],
    "titles": [],
    "dataProvider": dataprovider,
    "export": {
        "enabled": true
    },

    "chartScrollbar": {
        "offset": 15,
        "scrollbarHeight": 5
    },

    "chartCursor":{
       "pan":true,
       "cursorAlpha":0,
       "valueLineAlpha":0
    }
});

我想在x轴上获得动态日期，在y轴上获得动态数值和值。请帮我在amcharts中绘制这样一张xy图表

Answer 1

有两个问题 -

1）填充数据提供者的逻辑不正确。您需要直接推送到循环中的dataprovider数组。逻辑应该是：

var dataprovider = [];
for(i=0;i<=month.length;i++){
  dataProvider.push({
  "date" : month[i],
  "y"    : total[i],
  "value"  : total[i]
  });
}

请注意括号和花括号的位置 - 您使用括号调用dataprovider数组的push 函数并且您正在推送对象（{ ... }）将您的数据包含到数组中。

2）dataDateFormat不支持“MMM”。正如您在AmCharts' formatting dates documentation中所看到的，不支持任何带星号的格式。您的数据/日期在生成的dataprovider数组中应如下所示：

dataprovider = [{
  "date": "2015-01",
  "y": 19,
  "value": 19
 },
 {
  "date": "2015-02",
  "y": 18,
  "value": 18
 },
  // etc
]

这是一个包含正确格式数据的演示

//dummy data:
var month = [ "2015-01",  "2015-02",  "2015-03",  "2015-04",  "2015-05",  "2015-06",  "2015-07",  "2015-08",  "2015-09",  "2015-10",  "2015-11",  "2015-12"];

var total = [ 17,  16,  15,  16,  19,  20,  17,  20,  16,  19,  16,  18 ];
var dataprovider = [];

for(var i=0;i<=month.length;i++){
  dataprovider.push({
  "date" : month[i],
  "y"    : total[i],
  "value"  : total[i]
  });
}


var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "theme": "light",
  "marginRight": 80,
  "dataDateFormat": "YYYY-MM",
  "startDuration": 1.5,
  "trendLines": [],
  "balloon": {
    "adjustBorderColor": false,
    "shadowAlpha": 0,
    "fixedPosition": true
  },
  "graphs": [{
    "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
    "bullet": "diamond",
    "id": "AmGraph-1",
    "lineAlpha": 0,
    "lineColor": "#b0de09",
    "fillAlphas": 0,
    "valueField": "value",
    "xField": "date",
    "yField": "y"
  }, {
    "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
    "bullet": "round",
    "id": "AmGraph-2",
    "lineAlpha": 0,
    "lineColor": "#fcd202",
    "fillAlphas": 0,
    "valueField": "bValue",
    "xField": "date",
    "yField": "by"
  }],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "axisAlpha": 0
  }, {
    "id": "ValueAxis-2",
    "axisAlpha": 0,
    "position": "bottom",
    "type": "date",
    "minimumDate": new Date(2014, 11, 1),
    "maximumDate": new Date(2016, 0, 1)
  }],
  "allLabels": [],
  "titles": [],
  "dataProvider": dataprovider,
  "export": {
    "enabled": true
  },

  "chartScrollbar": {
    "offset": 15,
    "scrollbarHeight": 5
  },

  "chartCursor": {
    "pan": true,
    "cursorAlpha": 0,
    "valueLineAlpha": 0
  }
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv" style="width 100%; height: 400px"></div>

动态数据推送基于日期的字段

1 个答案: