在堆积区域图表中填补缺口

Question

我有一个堆积区域图表，其中包含两组当前值和投影值。每个都具有以交互方式调整的值，并且被赋予颜色（投影区域将是当前区域的阴影）。我无法解决如何在当前＆＃39;之间取消休息的问题。并且＆＃39;预测＆＃39;系列。如果我加入它们（通过点击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/