如何在highcharts列范围图的各个列中显示重叠

Question

我需要显示基于事件的日历。然而，几乎没有与日历相关的功能，它只是一年中事件的图形表示。因此我计划使用 HighCharts columnrange 图表。这为我节省了很多用于事件监听的样板文件。

但是，当我遇到多个重叠事件时，我很难将它们显示为不同。

如何使用 highcharts 的现有功能来完成此任务。

我在事件中查找样式属性。但找不到任何有用的东西。我尝试搜索 highcharts 是否提供任何形式的渐变实现，但我也没有得到太多帮助。我尝试给颜色设置不透明度为 rgb(r,g,b, 0.2)，但不知何故这变成了黑色。

这是我的作品demo。在此图表中，event8 和 event7 重叠。确切的持续时间分别类似于事件 9 和事件 10。

我发现了一个类似的问题here，但是这个问题讲的是垂直重叠，而我需要区分水平重叠（如演示所示）。我也尝试了这里给出的答案，没有任何影响。

有人可以建议实现它的方法吗？

Answer 1

我认为为您的列使用部分透明的颜色是个好主意。要使用透明颜色，您应该使用 rgba，而不是 rgb 参数。

在这里您可以找到可能对您有帮助的代码：

  data: [{
    name: 'event7',
    x: 1,
    low: 36,
    high: 43,
    color: "red"
  }, {
    name: 'event8',
    x: 1,
    low: 25,
    high: 38,
    color: "rgba(100,100,100,0.6)"
  }]

在这里您可以找到它如何工作的实例： http://jsfiddle.net/ay1Lk2yw/4/

如何在highcharts列范围图的各个列中显示重叠

How to show overlapping in various columns of highcharts column range graph

javascript

highcharts

overlapping