Показать пробелы (разность) между строкой и линией

Question

Можно ли провести промежутки между различными типами диаграмм? В моем примере (рисунок ниже) у меня есть бары и строка в одной диаграмме. Зазор всегда является разницей в стоимости строки и значении бара ниже. Кроме того, если планка находится над линией, это должен быть зеленый зазор, иначе красный.

Возможно, можно нарисовать «нормальный» зазор между дном и линией за фактическим баром, но это будет работать только для красных промежутков, а не для зеленых?

Вот мой пример изображения: http://i.imgur.com/ruvjxA2.png

Answer 1

Что вы показываете только 4 различных серий данных. Серия синих полос, серия черных линий, серия «ниже» зеленого цвета и серия «сверху» красного цвета.

Учитывая, что у вас уже есть линия и бар серии, как это:

var dataBar = [[0,23],[1,34],[2,45],[3,21]]; 
var dataLine = [[0,13],[1,53],[2,23],[3,90]]; 

Вы можете создать две другие серии, как:

var diffAbove = []; 
    var diffBelow = []; 
    for (var j = 0; j < 10; j++) { 
    if (dataLine[j][1] > dataBar[j][2]) { 
     diffAbove.push([j, dataLine[j][3], dataBar[j][4]]); 
    } else { 
     diffBelow.push([j, dataBar[j][5], dataLine[j][6]]); 
    } 
    } 

, а затем просто поставить все это вместе, используя array of series объектов:

var dataSeries = [{ 
     color: 'blue', 
     data: dataBar, 
     lines: { 
     show: false 
     }, 
     bars: { 
     show: true, 
     align: 'center', 
     barWidth: 0.8 
     } 
    }, { 
     color: 'black', 
     data: dataLine, 
     lines: { 
     show: true 
     }, 
     bars: { 
     show: false 
     } 
    }, { 
     color: 'red', 
     data: diffAbove, 
     lines: { 
     show: false 
     }, 
     bars: { 
     show: true, 
     barWidth: 0.5, 
     align: 'center' 
     } 
    }, { 
     color: 'green', 
     data: diffBelow, 
     lines: { 
     show: false 
     }, 
     bars: { 
     show: true, 
     barWidth: 0.5, 
     align: 'center' 
     } 
    } 
    ]; 

Это производит (пример here):