Highcartsカスタム伝説

Question

にはどうすればoptions.Youはさらに希望CSSでカスタマイズすることができ、この

Answer 1

チェックhighcharts legend APIに

から伝説

をカスタマイズすることができます。 （背景色はチャート自体から取られる）

legend: { 
    align: 'right', 
    verticalAlign: 'top', 
    layout: 'vertical', 
    x: -50, 
    y: 120, 
    symbolPadding: 0, 
    symbolWidth: 0.1, 
    symbolHeight: 0.1, 
    symbolRadius: 0, 
    useHTML: true, 
    symbolWidth: 0, 
    labelFormatter: function() { 
    if(this.name=="Microsoft Internet Explorer"){ 
     return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>'; 
    } 
    if(this.name=="Chrome"){ 
    return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>'; 
    } 
    if(this.name=="Firefox"){ 
    return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_261106.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>'; 
    } 

    }, 
    itemStyle: { 
    color: '#ffffff', 
    fontWeight: 'bold', 
    fontSize: '19px' 
    } 
}, 

Fiddleデモ適切なSVG画像を使用し

Answer 2

あなたは伝説を変更することができます。

.highcharts-legend-item rect { 
    visibility: hidden; 
} 

とlabelFormatterを使用：伝説のシンボルの代わりにカスタムアイコンを表示するには、あなたは、真の値とのlegend.useHTMLを設定して、シンボルを非表示にする必要があります。下記の例を見てください。

APIリファレンス：
http://api.highcharts.com/highcharts/legend

例：3015ディープ
http://jsfiddle.net/2trc1gv9/