从同一列的数据组创建多个图表 [英] create multiple charts from data groups of the same column

问题描述

如何制作此仪表板

从该数据中

time,group_name,value
15/10/2017 15:36:15,group-1,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-1,1
15/10/2017 15:36:17,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:19,group-3,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-1,1

使用dc.js？

谢谢。

推荐答案

您可以执行以下操作：首先通过时间和组列对维度进行分组/分组，然后使用伪造的组将一组分为多个。

You can do this by first dimensioning/grouping by both the time and group columns, then using a fake group to split one group into many.

我无权访问您的数据（最好是在提问时将您的数据粘贴为文本），所以我举了一个使用以下示例中的数据的示例dc.js示例。数据如下所示：

I don't have access to your data (it's better to paste your data as text when asking a question), so I whipped up an example using data from one of the dc.js examples. The data looks like this:

Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
...
2,1,960
2,2,940
2,3,960
2,4,940
2,5,880
2,6,800

有两个重要步骤。首先，我们需要创建一个维度，并在X维度和要作为划分依据的维度上键入键。在这种情况下，我们希望 Run 为X维度，并且我们想除以 Expt 。我们将首先放置 Run 。该组是正常的。

There are two important steps. First we need to create a dimension and group keyed on both the X dimension and the dimension to split by. In this case, we want Run to be the X dimension, and we want to split by Expt. We'll put Run first. The group is normal.

var runExptDim = cf.dimension(function(d) {
  return [d.Run, d.Expt];
});
var runExptGroup = runExptDim.group().reduceSum(function(d) {
  return d.Speed;
});

现在，我们需要一个伪造的组，用第二个密钥拆分原始组。这是一个允许我们为所有 Expt 值构造假组的函数：

Now we need a fake group to split the original group by the second key. Here's a function which will allow us to construct fake groups for all the values of Expt:

function split_group(group2d) {
  return {
    subgroup: function(key) {
      return {
        all: function() {
          return group2d.all().filter(function(kv) {
            return kv.key[1] === key;
          }).map(function(kv) {
            return {key: kv.key[0], value: kv.value};
          }).sort(function(a, b) {
            return a.key - b.key;
          })
        }
      };
    }
  };
}

这里没有魔术。子组的 .all（）方法被调用时，它从原始组中提取数据，使用键的第二部分过滤数据，并删除第二部分。使用 .map（）键。

There's no magic here. When a subgroup's .all() method is called, it pulls the data from the original group, filters the data using the second part of the key, and removes the second part of the key using .map().

最后，它还必须对数据进行排序，因为多键往往会弄乱顺序，因为当您使用多键时，数据会转换为字符串进行排序。

Finally it also has to sort the data because multikeys tend to mess up the ordering, because the data is cast to strings for sorting when you use multikeys.

像这样抓取子组：

var splitGroup = split_group(runExptGroup);
var runGroup1 = splitGroup.subgroup(1),
  runGroup2 = splitGroup.subgroup(2),
  runGroup3 = splitGroup.subgroup(3);

由于我们有一个奇怪的维度，因此尚不清楚要为图表指定哪个维度。最简单的方法是在X轴上创建另一个尺寸：

Since we've got a strange dimension, it's not clear what dimension to specify to the charts. The simplest thing to do is create another dimension on the X axis:

var runDim = cf.dimension(function(d) {
  return d.Run;
});

但是，这将导致图表自行过滤。

However, this will cause the chart to filter itself. I'll probably revisit my answer later and correct this.

图表初始化看起来像这样：

A chart initialization looks like this:

var line1 = dc.lineChart('#line1')
  .width(400).height(200)
  .dimension(runExptGroup)
  .group(runGroup1)
  .x(d3.scale.linear())
  .elasticX(true)
  .elasticY(true);

这不能满足您的样式需求，但是您可以看一下 sparkline示例，以获取一些提示。

This doesn't cover your styling needs, but you can take a look at the sparkline example for some hints there.

下面是一个小提琴示例： https://jsfiddle.net/gordonwoodhull/og68rkqz/

Here's an example fiddle: https://jsfiddle.net/gordonwoodhull/og68rkqz/

希望这会有所帮助！

要显示每个拆分组的总数，您可以创建一个 fake groupAll，其值小于 s：

To display the totals of each split group, you can create a "fake groupAll" that takes the sum of values:

  function total_group(group) {
    return {
      value: () => d3.sum(group.all(), kv => kv.value)
    };
  }

数字显示可以接受带的groupAll对象.total（）方法或常规组，在这种情况下，它将找到 .all（）

The number display can take either a groupAll object with .total() method or a regular group, in which case it'll find the max of .all()

奇怪的是，在使用groupAll时，它需要标识值访问器。全部放在一起：

Strangely, it needs the identity value accessor when working with a groupAll. Putting it all together:

  var identity = x => x;

  var number1 = dc.numberDisplay('#num1')
    .valueAccessor(identity)
    .group(total_group(runGroup1));

小提琴的叉子： https://jsfiddle.net/gordonwoodhull/aj1m9ysg/1/

这篇关于从同一列的数据组创建多个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！