Запись в зазоре в таблице с разбивкой по областям

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/