2017-12-05 38 views
1

私は折れ線グラフを持っており、凡例シンボルをカスタマイズしました。図表では、useHTMLと凡例記号としてのdivのスタイルを使用してカスタマイズしていますが、私はカスタマイズのエクスポートに苦労しています。エクスポート時にhighchartの凡例シンボルを変更しないでください

私はこのような何か試してみました:

exporting:{ 
    allowHTML : true, 
    sourceWidth:1024, 
    chartOptions: { 
     title: { 
      style: { 
       fontSize: '14px' 
      } 
     }, 
     legend : { 
      symbolPadding: 0, 
      symbolWidth: 0, 
      symbolHeight : 0, 
      symbolRadius: 0, 
      useHTML : true, 
      labelFormatter : function() { 
       return '<div>' + 
         '<div class="legend-symbol-bar" style="background-color: ' + this.color +';"> </div>' + 
         "<span> " + this.name + " </span>" + 
         '</div>' 
      } 
     } 
    } 
} 

をしかし、エクスポートの伝説はちょっと効果的ではありません。

ここにはjs fiddleがあります。

答えて

0

ハイチャートのエクスポートでは、CSSファイルで定義されているスタイルが省略されているようです。

chartOptions: { 
     chart: { 
     events: { 
      load: function() { 
      this.legend.update({ 
       symbolWidth: 0, 
       labelFormatter: function() { 
       this.legendSymbol.css({ 
        display: 'none' 
       }); 
       return '<div>' + 
        '<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.color + ';"> </div>' + 
        "<span> " + this.name + " </span>" + 
        '</div>' 
       } 
      }); 
      } 
     } 
     }, 
    (...) 

伝説シンボルがあまりにも(css機能)JSコードを経由して非表示にすることができます。彼らはあなたがJSかかわらず、(loadイベント)を介してそれらを割り当てた場合に動作します。

ライブデモ:http://jsfiddle.net/kkulig/efhyabzs/


APIリファレンス: