2016-11-15 9 views
0

私はamChartSerialChartを使用しています。amserialchartグラフd累積計算

 "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であることを願っています。 どのような解決方法がありますか?

答えて

0

Reduce

Map

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

0

チャートは自動的に同じ日付の値を合計しません。また、重複した日付をサポートしていません。チャートの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] 
    }; 
}); 

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", 
 
    } 
 
});
#chartdiv { 
 
    width: 100%; 
 
    height: 300px; 
 
}
<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>

WWが無効minPeriodであることに注意してください。数週間でデータをグループ化する場合は、代わりに7DDを使用してください。 API documentation for minPeriod

関連する問題