X轴上的Highcharts系列名称

Question

我有这个柱形图http://jsfiddle.net/TU7TL/我想知道是否有办法让系列名出现在其各自的列下，例如“东京”将直接位于蓝色条之下而非只是在传说中。下面

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Monthly Average Rainfall' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: { 
      categories: [ 
       'Tokyo', 
       'New York', 
       'London' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Rainfall (mm)' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [49.9] 

     }, { 
      name: 'New York', 
      data: [83.6], 


     }, { 
      name: 'London', 
      data: [48.9] 

     }, { 
      name: 'Berlin', 
      data: [42.4] 

     }] 
    }); 
}); 

Answer 1

代码填写的类别为：

categories: [ 
        'Tokyo', 
        'New York', 
        'London', 
        'Berlin' 
       ] 

然后堆叠选项为：

plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0, 
        stacking: 'normal' 
       } 
      } 

那么你的数据在系列为：

series: [{ 
       name: 'Tokyo', 
       data: [49.9,null,null,null] 

      }, { 
       name: 'New York', 
       data: [null,83.6,null,null], 


      }, { 
       name: 'London', 
       data: [null,null,48.9,null] 

      }, { 
       name: 'Berlin', 
       data: [null,null,null,42.4] 

      }] 

这里你有小提琴：

http://jsfiddle.net/TU7TL/1/

或者你可以只使用一个系列，并把所有的数据系列阵列一样，在做到这一点：

series: [{ 
      name: 'Measure', 
      data: [{y:49.9, color: colors[0]},{y:83.6, color: colors[1]},{y:48.9, color: colors[2]},{y:42.4,color: colors[3]}] 

     }] 
    }); 

有了你这个最后的方法在同一系列中指定不同的颜色。以前我声明和使用变量 “颜色”，从Highchart得到的颜色：

var colors = Highcharts.getOptions().colors; 

小提琴例在这里： http://jsfiddle.net/TU7TL/4/