Question

我正在使用amChartSerialChart。

        "categoryField": "ymd",
        "categoryAxis": {
            "dateFormats": [{
                "period": "DD",
                "format": "DD"
            }, {
                "period": "WW",
                "format": "MMM DD"
            }, {
                "period": "MM",
                "format": "MMM"
            }, {
                "period": "YYYY",
                "format": "YYYY"
            }],
            "parseDates": true,
            "minPeriod": "WW",

 "dataProvider": [{
    "date": "2016-11-14",
    "value": 1
}, {
    "date": "2016-11-14",
    "value": 2
}, {
    "date": "2016-11-15",
    "value": 3
}, {
    "date": "2012-11-15",
    "value": 4
}

如果有多个相同日期的数据，我想获得总结果。我希望结果值是10。有什么样的解决方案？

Answer 1

Reduce

Map

＆＃13;

dataProvider= [{
    "date": "2016-11-14",
    "value": 1
}, {
    "date": "2016-11-14",
    "value": 2
}, {
    "date": "2016-11-15",
    "value": 3
}, {
    "date": "2012-11-15",
    "value": 4
}]
 var result=dataProvider.map(function(arr){return arr.value;
}).reduce((a, b) => a + b, 0);;
console.log(result);

＆＃13;

Answer 2

图表不会自动汇总同一日期的值，也不支持重复日期。在将数据分配给图表的dataProvider之前，您需要预先处理数据。

var rawData =  [{
    "date": "2016-11-14",
    "value": 1
}, {
    "date": "2016-11-14",
    "value": 2
}, {
    "date": "2016-11-15",
    "value": 3
}, {
    "date": "2012-11-15",
    "value": 4
}]

//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
  if (accumulator.hasOwnProperty(data.date)) {
    accumulator[data.date] += data.value;
  } else {
    accumulator[data.date] = data.value;
  }
  return accumulator;
}, {});

//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
  return {
    "date": date,
    "value": aggregatedTotals[date]
  };
});

＆＃13;

var rawData = [{
  "date": "2016-11-15",
  "value": 4
}, {
  "date": "2016-11-15",
  "value": 1
}, {
  "date": "2016-11-16",
  "value": 3
}, {
  "date": "2016-11-16",
  "value": 4
}, {
  "date": "2016-11-17",
  "value": 3
}, {
  "date": "2016-11-17",
  "value": 3
}, {
  "date": "2016-11-18",
  "value": 5
}, {
  "date": "2016-11-18",
  "value": 1
}, {
  "date": "2016-11-19",
  "value": 4
}, {
  "date": "2016-11-19",
  "value": 1
}, {
  "date": "2016-11-20",
  "value": 4
}, {
  "date": "2016-11-20",
  "value": 3
}, {
  "date": "2016-11-21",
  "value": 3
}, {
  "date": "2016-11-21",
  "value": 3
}, {
  "date": "2016-11-22",
  "value": 5
}, {
  "date": "2016-11-22",
  "value": 3
}, {
  "date": "2016-11-23",
  "value": 4
}, {
  "date": "2016-11-23",
  "value": 4
}, {
  "date": "2016-11-24",
  "value": 4
}, {
  "date": "2016-11-24",
  "value": 2
}, {
  "date": "2016-11-25",
  "value": 5
}, {
  "date": "2016-11-25",
  "value": 4
}, {
  "date": "2016-11-26",
  "value": 5
}, {
  "date": "2016-11-26",
  "value": 1
}, {
  "date": "2016-11-27",
  "value": 5
}, {
  "date": "2016-11-27",
  "value": 3
}, {
  "date": "2016-11-28",
  "value": 5
}, {
  "date": "2016-11-28",
  "value": 1
}, {
  "date": "2016-11-29",
  "value": 3
}, {
  "date": "2016-11-29",
  "value": 3
}, {
  "date": "2016-11-30",
  "value": 4
}, {
  "date": "2016-11-30",
  "value": 3
}, {
  "date": "2016-12-01",
  "value": 4
}, {
  "date": "2016-12-01",
  "value": 2
}, {
  "date": "2016-12-02",
  "value": 4
}, {
  "date": "2016-12-02",
  "value": 1
}, {
  "date": "2016-12-03",
  "value": 4
}, {
  "date": "2016-12-03",
  "value": 3
}, {
  "date": "2016-12-04",
  "value": 3
}, {
  "date": "2016-12-04",
  "value": 1
}, {
  "date": "2016-12-05",
  "value": 5
}, {
  "date": "2016-12-05",
  "value": 2
}, {
  "date": "2016-12-06",
  "value": 3
}, {
  "date": "2016-12-06",
  "value": 3
}, {
  "date": "2016-12-07",
  "value": 5
}, {
  "date": "2016-12-07",
  "value": 1
}, {
  "date": "2016-12-08",
  "value": 4
}, {
  "date": "2016-12-08",
  "value": 1
}, {
  "date": "2016-12-09",
  "value": 3
}, {
  "date": "2016-12-09",
  "value": 4
}, {
  "date": "2016-12-10",
  "value": 5
}, {
  "date": "2016-12-10",
  "value": 2
}, {
  "date": "2016-12-11",
  "value": 5
}, {
  "date": "2016-12-11",
  "value": 1
}, {
  "date": "2016-12-12",
  "value": 3
}, {
  "date": "2016-12-12",
  "value": 2
}];

//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
  if (accumulator.hasOwnProperty(data.date)) {
    accumulator[data.date] += data.value;
  } else {
    accumulator[data.date] = data.value;
  }
  return accumulator;
}, {});

//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
  return {
    "date": date,
    "value": aggregatedTotals[date]
  };
});

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": chartData,
  "graphs": [{
    "bullet": "round",
    "valueField": "value"
  }],
  "dataDateFormat": "YYYY-MM-DD",
  "categoryField": "date",
  "categoryAxis": {
    "dateFormats": [{
      "period": "DD",
      "format": "DD"
    }, {
      "period": "WW",
      "format": "MMM DD"
    }, {
      "period": "MM",
      "format": "MMM"
    }, {
      "period": "YYYY",
      "format": "YYYY"
    }],
    "parseDates": true,
    "minPeriod": "7DD",
  }
});

＆＃13;

#chartdiv {
  width: 100%;
  height: 300px;
}

＆＃13;

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

＆＃13;

请注意WW无效minPeriod。如果您想在几周内对数据进行分组，请改用7DD。 API documentation for minPeriod

amserialchart图表d升级计算

2 个答案: