dc.js-添加下拉列表以选择日期范围 [英] dc.js - add drop down to select date range

问题描述

我正在使用dc.js来显示一些信息，我想添加一个下拉列表以将日期范围选择为-全部，过去7天，过去30天，过去90天。

I'm using dc.js to display some info, I would like to add a drop down to select the date range as - All, last 7 days, last 30 days, last 90 days.

如何将其添加到以下内容？

How would I add that to the following?

var dataTable = dc.dataTable("#dc-table-graph");

var data = [
 {date: "2014-08-15T06:30:43Z", amount: 10},
 {date: "2014-08-12T10:30:43Z", amount: 10 },
 {date: "2014-08-1T16:28:54Z", amount: 100 },
 {date: "2014-07-28T18:48:46Z", amount: 100 },
 {date: "2014-07-26T20:53:41Z", amount: 11 },
 {date: "2014-07-16T10:53:41Z", amount: 5 },
 {date: "2014-05-1T22:54:06Z", amount: 10 },
 {date: "2013-11-1T10:30:43Z", amount: 2 },
 ];

var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%SZ");

data.forEach(function (d) {
  d.date   = dtgFormat.parse(d.date.substr(0,20));
  d.amount  = +d.amount;
  d.type = d.type;
});


var ndx = crossfilter(data);
var timeDimension = ndx.dimension(
  function (d) {return d.date;});

dataTable.width(960).height(800)
  .dimension(timeDimension)
  .group(function(d) { return "" })
  .size(20)
  .columns([
    function(d) { return d.date; },
    function(d) { return d.amount; },
  ])
  .sortBy(function(d){ return d.date; })
  .order(d3.ascending);

dc.renderAll();

http://jsfiddle.net/northside45/uvxzo785/

推荐答案

按时添加另一个维度它会影响数据表的维度。 （在交叉过滤器中，过滤维度只会影响其他维度，而不会影响本身。）

Add another dimension on time so that it affects the dimension for your data table. (In crossfilter, filtering a dimension will only affect other dimensions, not itself.)

然后在该维度上使用 filterRange

https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension_filterRange

这篇关于dc.js-添加下拉列表以选择日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！