Highchartsは、カスタムシンボル伝説

Question

私は私のチャート

私はHighcharts.jsを使用するためのカスタム凡例記号にする必要があります。 私は成功せず、いくつかの解決策を試してください：

伝説

• ：RECTまたはスパンは、背景色をサポートしていませんtspanとして、HTMLで生成された

  legend: { 
      enabled: true, 
      align: 'left', 
      verticalAlign: 'middle', 
      layout: 'vertical', 
      useHtml: true, 
      symbolHeight: 0, 
      symbolWidth: 0, 
      labelFormatter: function() { 
        if (this.name == 'Epargne') return '<div><rect style="width:100px;display:inline-block;padding:10px 4px 10px 4px;text-align:center;color:#FFF;fill:'+ this.color +'">47.000€</rect><b>EPARGNE</b></div>'; 
        if (this.name == 'Profil prudent') return 'PRUDENT'; 
        if (this.name == 'Profil équilibré') return 'EQUILIBRE'; 
        if (this.name == 'Profil entreprenant') return 'ENTREPRENANT'; 
        return '??' 
       } 
  }, 
  

• シリーズ：シンボルがテキストことはできませんあらかじめ定義されていても動作しません。私は線の上にシンボルを表示しないので、plotOptionsでマーカーを無効にします。レンダラを使用して

  series: [ 
      { 
         data: [], 
         id: 'epargne', 
       name: 'Epargne', 
         marker: { 
         symbol: 'triangle' 
         } 
        }, 
       { 
      linkedTo: 'epargne', 
        name: 'Epargne', 
         data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
         color: '#2f7ed7' 
       }, 
  

• ：jsfiddle

  はそれが可能です：ここでフィドルを

  Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) { 
      return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z']; 
  }; 
  if (Highcharts.VMLRenderer) { 
      Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross; 
  } 
  

を適用していませんか？どうすればこれを達成できますか？

ありがとうございます。

Answer 1

あなたはhtmlを使用して目的の結果を得ることができます。ラベルフォーマッタでは、テキストとボックスのdivコンテナを作成します。背景色を点の色に設定します。凡例の項目間のスペースはlegend.itemMarginBottom/Topで設定できます。

legend: { 
    enabled: true, 
    align: 'left', 
    verticalAlign: 'top', 
    layout: 'vertical', 
    useHTML: true, 
    symbolHeight: 0, 
    symbolWidth: 0, 
    itemMarginTop: 4, 
    itemMarginBottom: 4, 
    labelFormatter: function() { 
    return '<div><div style="width:70px;display:inline-block;padding:3px 2px 3px 2px;text-align:center;color:#FFF;background-color:' + this.color + '">47.000€</div> <b>' + this.name + '</b></div>'; 
    } 
}, 

例：https://jsfiddle.net/5n7fue7m/