在堆積區域圖中填充空白

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/