ハイチャート列グラフカスタム凡例の書式が凡例記号を表示しない

Question

ハイチャートを使用して簡単な柱状図を作成しようとしています。一番下に伝説を表示するには、凡例と同じ色の凡例記号と、値とカテゴリが続くバーを表示できます。何らかの理由で、私は最初の凡例記号しか見ません。ここでは、カスタムの伝説を必要としないという結果を達成するために、ソースhttps://jsfiddle.net/DeanSharma/gjbfj0rg/

$(function() { 
    var categories = ["Open","Expire within 90 days","In Progress","Past"], 
    colors = ["#1097ae","#81cbd6","#b4d66c","#317fc2"], 
    data = [9,13,7,8]; 
    var chartData = [{y: 9, color: '#1097ae', name: 'Open'}, {y: 13, color: '#81cbd6', name: 'Expire within 90 days'}, {y: 7, color: '#b4d66c', name: 'In Progress'}, {y: 8, color: '#317fc2', name: 'Past'}]; 
    var customLegend = '<div class="legend" style="vertical-align: bottom; background-color: transparent">'; 
    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column', 
     height: 400, 
     marginBottom: 100, 
     align: 'top' 
    }, 
    title: {text:'My Custom Column Chart', align:'center', style:{"font-size":'14px',"color":'#0000ff'}}, 
    colors: colors, 
    legend: { 
     align: 'center', 
     enabled: true, 
     floating: true, 
     symbolWidth: 0, 
     labelFormatter: function() {    
     for(index=0; index< categories.length; index++) { 
      customLegend += '<div style="background-color:' + colors[index] + ' ; width:12px; height:12px;"></div>'; 
      customLegend += '<div class="legend__value">' + data[index] + ' </div>'; 
      customLegend += '<div class="legend__name">' + categories[index] + ' </div>'; 
      customLegend += '<br />'; 

     }; 
     customLegend += '</div>'; 
     return customLegend; 
     }, 
     layout: 'horizontal', 
     verticalAlign: 'bottom', 
     y: 10 
    }, 
    credits: {enabled: true, text: 'Courtesy DeanS', href:'stackoverflow.com'}, 
    xAxis: { 
     categories: categories, 
     labels: {autoRotation: false, 
     style: {color: '#777',fontFamily: 'Open Sans',fontSize: '10px'} 
     }, 
     lineColor: '#f8f8f8', 
     tickColor: '#f8f8f8' 
    }, 
    yAxis: { 
     title: { 
     text: '', 
     useHTML: true 
     } 
    }, 
    series: [{ 
     data: chartData  
    }] 

    }); 
}); 

Answer 1

です。ポイントを別々のシリーズに分割し、グループ化を無効にして、ラベルフォーマッタでポイントの値とカテゴリを返すことができます。

plotOptions: { 
    series: { 
    grouping: false 
    } 
}, 
series: data.map((point, i) => { 
    return { 
    data: [ 
     [i, point] 
    ] 
    } 
}) 

伝説設定：

legend: { 
    labelFormatter: function() { 
    return data[this.index] + ' ' + categories[this.index]; 
    }, 
    layout: 'vertical', 
}, 

例：https://jsfiddle.net/gjbfj0rg/1/