Highcharts：字幕構造傳說

Question

我在最後一天玩Highcharts。

有一件事，我找不到，是如果有可能包括字幕的圖例結構的結果。

在我的例子：http://jsfiddle.net/gWEtB/

var allData={ 
     products: ["Product1", "Product2", "Product3", "Product4"] 
    } 

var colors={ 
     'own': ['#3B14AF', '#422C83', '#210672', '#886ED7'], 
     'comp': ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'], 
     'new': '#00CC00'} 

`$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Product Switching' 
     }, 
     xAxis: { 
      categories: allData.products 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: '' 
      }, 
      labels:{ 
       format:'{value} %' 
      } 
     }, 
     tooltip: { 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>', 
      shared: false 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'percent', 
       dataLabels: { 
        enabled: true, 
        formatter: function(){ 
         return this.percentage.toFixed(2)+' %'; 
        }, 
        color:'#FBF5EF' 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      y: 30, 
     }, 
      series: [{ 
      name: 'Own product1', 
      data: [5, 3, 4, 7], 
      color: colors.own[0] 
     }, 
     { 
      name: 'Own product2', 
      data: [5, 3, 4, 7], 
      color: colors.own[1] 
     }, 
     { 
      name: 'Own product3', 
      data: [5, 3, 4, 7], 
      color: colors.own[2] 
     }, 
     { 
      name: 'Own product4', 
      data: [5, 3, 4, 7], 
      color: colors.own[3] 
     }, 
     { 
      name: 'Competitor 1', 
      data: [2, 2, 3, 2], 
      color: colors.comp[0] 
     }, 
     { 
      name: 'Competitor 2', 
      data: [2, 2, 3, 2], 
      color: colors.comp[1] 
     }, 
     { 
      name: 'Competitor 3', 
      data: [2, 2, 3, 2], 
      color: colors.comp[2] 
     }, 
     { 
      name: 'Competitor 4', 
      data: [2, 2, 3, 2], 
      color: colors.comp[3] 
     }, 
     { 
      name: 'Competitor 5', 
      data: [2, 2, 3, 2], 
      color: colors.comp[4] 
     },   { 
      name: 'Market Potential', 
      data: [3, 4, 4, 2], 
      color: colors.new 
     }] 
    }); 
}); 

我尋找一種方式來字幕以這種方式添加到傳說：

拆：
Ø自己的產品1
Ø自己的產品2
o自己的產品3
o自己的產品4

競爭：
Ø競爭對手1
Ø競爭對手2
的...

我感謝所有幫助和信息。

THX

Answer 1

您可以使用labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter

簡單的例子：http://jsfiddle.net/gWEtB/1/

labelFormatter: function() { 
       switch(this.name) 
       { 
        case 'Own product1': 
         return 'Cannibalization<br/>'+ this.name; 
         break; 
        case 'Competitor 1': 
         return this.name + '<br/>Competition'; 
         break; 
        case 'Market Potential': 
         return this.name + '<br/>Market title'; 
         break; 
        default: 
         return this.name; 
         break; 
       } 

      }