显示条形和线条之间的间隙（差异）

Question

是否有可能在不同的图表类型之间划出差距？ 在我的例子中（下图）我在同一个图表中有条形和一条线。间隙始终是下面的线值和柱值的差值。 此外，如果栏位于线上方，则应为绿色间隙，否则为红色。

可能有可能画出一个正常的＆＃34;从底部到实际条后面的线条的间隙条，但这只适用于红色间隙而不适用于绿色间隙？

这是我的示例图片：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）：