javascript - 显示条和线之间的间隙(差异)

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

从底部到实际线后面的线可能会绘制一个“正常”的间隙线，但这仅适用于红色间隙而不适用于绿色间隙吗？

这是我的示例图片：http://i.imgur.com/ruvjxA2.png

最佳答案

您所显示的只是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）：

关于javascript - 显示条和线之间的间隙(差异)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27018497/