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

【问题标题】：Dynamic Data push for date based fields基于日期的字段的动态数据推送
【发布时间】：2017-10-26 17:27:41
【问题描述】：

我正在尝试将数据动态推送到 amcharts 中 XY 图表的dataProvider，但我无法实现。

我的图表没有被绘制。我的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 轴上获取动态数值，并带有 value 。请帮我在amcharts中画出这样的xy图表

【问题讨论】：

谢谢，是的，我明白了......它工作了！！！！

标签： amcharts

【解决方案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 函数，并且您正在推送一个 object (@ 987654324@) 包含您的数据到数组中。

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>

【讨论】：