填充堆积面积图中的间隙

Question

我有一个堆积面积图，其中包含两个系列的当前值和预测值。每个都有交互调整的值，并分配颜色（投影区域将是当前区域的阴影）。我不知道如何在 'current' 和 'projected' 系列之间不休息。如果我加入它们（通过单击 jsfiddle 中的形状来模拟），那一年的所有值都会被堆叠起来。我可以算出减去的值，但这似乎很老套。有一个更好的方法吗？我应该注意到这是一个更大的设计的一部分，我希望不会对其进行实质性的改造。

http://jsfiddle.net/d3jo0uu5/4/

var svg = dimple.newSvg("#chartContainer", 590, 400);
var s1 = [
    {series: 'S1', x: '2014', y: 10},
    {series: 'S1', x: '2015', y: 15},
    {series: 'S1', x: '2016', y: 15},

    {series: 'S2', x: '2014', y: 20},
    {series: 'S2', x: '2015', y: 25},
    {series: 'S2', x: '2016', y: 30},

    {series: 'P1', x: '2017', y: 10},
    {series: 'P1', x: '2018', y: 15},
    {series: 'P1', x: '2019', y: 15},

    {series: 'P2', x: '2017', y: 20},
    {series: 'P2', x: '2018', y: 25},
    {series: 'P2', x: '2019', y: 30}
];

var chart = new dimple.chart(svg);
var x = chart.addTimeAxis("x", ['x'], '%Y', '%Y');
x.timePeriod = d3.time.years;
x.timeInterval = 1;

var y = chart.addCategoryAxis("y", "y");

var s = chart.addSeries(['series'], dimple.plot.area);
s.stacked = true;
s.data = s1;
chart.assignClass('P1', 'future');
chart.assignClass('P2', 'future');

chart.draw();

s.shapes.on("click", function (e) {
    s1.push({series: 'P1', x: '2016', y: 15});
    s1.push({series: 'P2', x: '2016', y: 20});
    chart.draw(1000);
});

谢谢！

Answer 1

我能弄清楚如何获得我认为你想要的东西的唯一方法是将数据集分成两半（并添加两个系列），然后为前两个数据组添加 2017 年的重复值：

var s1data = [
  {series: 'S1', x: '2014', y: 10},
  {series: 'S1', x: '2015', y: 15},
  {series: 'S1', x: '2016', y: 15},
      {series: 'S1', x: '2017', y: 15}, //added

  {series: 'S2', x: '2014', y: 20},
  {series: 'S2', x: '2015', y: 25},
  {series: 'S2', x: '2016', y: 30},
      {series: 'S2', x: '2017', y: 30} //added
];

var s2data = [
      ...P1 values...
];

...same...

var s = chart.addSeries(['series'], dimple.plot.area);
s.stacked = false;
s.data = s1data;

var s2 = chart.addSeries(['series'], dimple.plot.area);
s2.stacked = false;
s2.data = s2data;

给你这个输出：

http://jsfiddle.net/d3jo0uu5/5/

填充堆积面积图中的间隙

Filing in gap in stacked area chart

javascript

dimple.js