显示堆栈标签Highcharts

Question

Im使用来自Highcharts的堆叠图表，但希望在堆叠条形图下面包含堆栈名称。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked-and-grouped/

JS

$(function() { 
    $('#container').highcharts({ 

     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     }, 

     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 

     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
      } 
     }, 

     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 

     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2], 
      stack: 'male' 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5], 
      stack: 'male' 
     }, { 
      name: 'Jane', 
      data: [2, 5, 6, 2, 1], 
      stack: 'female' 
     }, { 
      name: 'Janet', 
      data: [3, 0, 4, 4, 3], 
      stack: 'female' 
     }] 
    }); 
}); 

IIN这张图，我想表明 '男性' & '女性' 堆下面。

如何使用Highcharts

它我

喜欢的东西below..Where你显示堆栈的名字 - “维护”， “其他” 和 “峰”

Answer 1

我认为，在你的情况下，你可以使用分组类插件。您可能会发现在Highcharts插件库这个插件： http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

$(function() { 
    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: "container", 
     type: "column", 
    }, 
    plotOptions: { 
     series: { 
     stacking: 'normal' 
     } 
    }, 
    series: [{ 
     data: [4, 14, 18, 5, 6, 5] 
    }, { 
     data: [4, 14, 18, 5, 6, 5] 
    }, { 
     data: [4, 14, 18, 5, 6, 5] 
    }], 
    xAxis: { 
     categories: [{ 
     name: "Fruit", 
     categories: ["Apple", "Banana"] 
     }, { 
     name: "Vegetable", 
     categories: ["Carrot", "Potato"] 
     }, { 
     name: "Fish", 
     categories: ["Cod", "Salmon"] 
     }] 
    } 
    }); 
}); 

在这里，你可以找到简单的例子，如何图表可以用这个插件可以工作：http://jsfiddle.net/TFhd7/943/