javascript - 填充堆积面积图中的间隙

Question

我有一个堆积面积图，其中包含两个当前值和预测值系列。每个都有可交互调整的值，并指定颜色(投影区域将是当前区域的阴影)。我不知道如何在“当前”系列和“预计”系列之间不中断。如果我加入它们(通过单击 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/