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

Question

是否可以在不同图表类型之间绘制差距？在我的示例中(下图)，我在同一个图表中有条形图和一条线。差距始终是线值和下面的柱值之差。此外，如果条形图在线上方，则它应该是绿色间隙，否则应该是红色间隙。

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

这是我的示例图像:/image/QLoL3.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 ):