Highcharts - 从顶部的位置柱形图

Question

我有一个Highcharts柱形图，试图显示某一列的完成情况以及沿着x轴的相邻列中的落差。

这里的的jsfiddle：http://jsfiddle.net/2vXqZ/

 series: [ 
     { 
      data: [300, 150, 85, 75, 35], 
      pointWidth: 60, 
      dataLabels: { 
       enabled: true, 
       rotation: 90, 
       color: 'white', 
       align: 'right', 
       x: -10, 
       style: { 
        fontSize: '25px', 
       } 
      }, 
      stack: 'completion' 
     }, 
     { 
      data: [150, 65, 10, 40], 
      color: '#ff8546', 
      pointWidth: 20, 
      groupPadding: -0.2, 
      stack: 'drop-off' 
     }, 
     { 
      data: [150, 85, 75, 35], 
      color: 'transparent', 
      pointWidth: 20, 
      groupPadding: -0.2, 
      stack: 'drop-off', 
      states: { 
       hover: { 
        enabled: false 
       } 
      }, 
      dataLabels: { 
       enabled: false 
      } 
     } 
    ] 

蓝色列是原始值，而每个蓝色之一之间橙色列是送机（来自前一列的差）。现在，我通过堆叠两列（堆栈：'drop-off'）并使底部透明来进行这种设置。

有没有更清洁的解决方案呢？任何方式，我可以简单地将橙色列从顶部定位？

感谢

Answer 1

你总是可以设置您的落客系列为columnrange型。

 series: [ 
     { 
      data: [300, 150, 85, 75, 35], 
      pointWidth: 60, 
      dataLabels: { 
       enabled: true, 
       rotation: 90, 
       color: 'white', 
       align: 'right', 
       inside: true, 
       x:-10, 
       style: { 
        fontSize: '25px', 
       } 
      } 
     }, 
     { 
      type: 'columnrange', 
      data: [[0.5,150,300],[1.5,85,150],[2.5,75,85],[3.5,35,75]], 
      color: '#ff8546', 
      pointWidth: 20, 
      groupPadding: -0.2 
     } 
    ] 

查看更新小提琴here。