使用相同的数据集创建 Plottable.js 个堆积条形图

Question

我正在尝试使用来自同一数据集的 plottable.js 创建堆积条形图。可能吗？

这是我的示例数据集

var data = [{ x: 0, y: 1, m: 10 },
            { x: 1, y: 1, m: 9 },
            { x: 2, y: 3, m: 5 },
            { x: 3, y: 2, m: 5 },
            { x: 4, y: 4, m: 8 },
            { x: 5, y: 3, m: 7 },
            { x: 6, y: 5, m: 5 }];

在 http://plottablejs.org/components/plots/stacked-bar/ 上发布的示例中，它使用了两个数据集。

var plot = new Plottable.Plots.StackedBar()
           .addDataset(new Plottable.Dataset(primaryData).metadata(5))
           .addDataset(new Plottable.Dataset(secondaryData).metadata(3))
           .x(function(d) { return d.x; }, xScale)
           .y(function(d) { return d.y; }, yScale)
           .attr("fill", function(d, i, dataset) { return dataset.metadata(); }, colorScale)
           .renderTo("svg#example");

我的问题是，因为我使用的是相同的数据集，所以我需要将 'y' 函数更改为两个不同的函数，如下所示：

.y(function(d) { return d.y; }, yScale)
.y(function(d) { return d.m; }, yScale)

可能吗？如果是，如何？

谢谢...

Answer 1

您可以根据相同的数据创建两个不同的 Plottable.Dataset。

所以这样开始：

var ds1 = new Plottable.Dataset(data);
var ds2 = new Plottable.Dataset(data);

但是，稍后您需要区分这两个数据集才能知道使用哪个属性，因此您应该添加元数据

var ds1 = new Plottable.Dataset(data, {name: "ds1"});
var ds2 = new Plottable.Dataset(data, {name: "ds2"});

现在稍后，您可以参考数据集的名称以了解在 .y() 调用中 return 的值

plot.y(function(d, i, ds){
  if(ds.metadata().name == "ds1"){
    return d.y;
  }
  else{
    return d.m;
  }
}, yScale);

使用相同的数据集创建 Plottable.js 个堆积条形图

Create Plottable.js stacked bar chart using the same dataset

javascript

charts

plottable