dc.js LineChart按月/年汇总 [英] dc.js LineChart Aggregated by Month/Year

问题描述

我试图绘制一个lineChart，我想按月汇总数据.我正在使用 crossfilter文档中的数据集，并在日期上进行了一些修改.

I trying to plot a lineChart and I want to aggregate data by Month. I am using dataset from crossfilter documentation with slight modification in date.

这是我的数据集的样子:

This is how my dataset looks like:

var data = [
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-07-10T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-07-15T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-06-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-06-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-05-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-07-17T16:14:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-05-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-12-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];

我想按月分总计.我的数据组将根据日期而不是月份返回总计.

I want to group total by Month-Year. My Data Group is returning total based on date instead of Month.

在我的图中，将7月10日，15日和17日绘制为不同的点.我想将它们全部合并为2017年7月的要点.我该如何实现?有指针吗? 谢谢大家！

In my graph, July 10, 15 and 17 are plotted as different point. I want to combine them all into July-2017 points. How do I acheive that ? Any pointers? Thanks All!

这是一个小提琴: https://jsfiddle.net/usingh2buffaloedu/8u0etnwd/

推荐答案

我在dc.js中出现时间渲染问题，但是在您的示例中，关键是要获取维度中的月份值.

I've had issues with time rendering in dc.js, but in your example the key is to get the month values in your dimension.

var dateDimension = facts.dimension(function (d) {return d3.time.month(d.newDate); });

查看更新的小提琴( https://jsfiddle.net/ury1k1bs/1/)

See the updated fiddle (https://jsfiddle.net/ury1k1bs/1/)

我认为.round()图表方法仅适用于刷涂，而不适用于渲染.

I think the .round() chart method is only useful for brushing, not for rendering.

有关更多信息，请参阅dc.js提供的时间间隔示例... http://dc-js.github.io/dc.js/examples/switching-time-intervals.html

For more see the time interval example provided by dc.js... http://dc-js.github.io/dc.js/examples/switching-time-intervals.html

这篇关于dc.js LineChart按月/年汇总的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！