Highcharts列圖自定義圖例格式不顯示圖例符號

我試圖用Highcharts創建一個簡單的列圖。我希望能夠在底部顯示具有與條形碼相同顏色的圖例符號以及值和類別的圖例。出於某種原因，我只看到第一個傳奇符號。這裏是來源https://jsfiddle.net/DeanSharma/gjbfj0rg/Highcharts列圖自定義圖例格式不顯示圖例符號

$(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  
    }] 

    }); 
});

來源

2017-03-07 Dean Sha

爲了達到這個結果，你不需要自定義圖例。您可以將點分成單獨的系列，禁用分組，然後在標籤格式化程序中 - 返回點的值和類別。

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/

來源

2017-03-07 21:32:52 morganfree

在Chrome工作很好，但在Safari給出錯誤（_SyntaxError：意外令牌 '>'）上一行：系列：data.map（（point，i）=> {但是我可以通過創建一個獨立的函數來構建對象數組而不是data.map來避免它：function buildSeriesObject（data）{var，0， VAL;對於（i = 0; i

檢查[兼容性表]（https://kangax.github.io/compat-table/es6/）或使用像babel這樣的轉譯器 – morganfree

Highcharts列圖自定義圖例格式不顯示圖例符號

回答

相關問題