2016-08-02 19 views
0

私は自分のプロジェクトでChartJSを使用しています(より正確には、Angular 2のng2-chartsは元のライブラリの上に構築されています)。ChartJSの凡例を非表示にする/カスタマイズする方法はありますか?

伝説:

私はそこに見るには、オプションで偽|真の私が削除ことができるように特に迷惑TOTを見つけるしかし

上部の凡例に各ラインを説明し(例えば折れ線グラフ)。あなたは私が何を意味するか見ることができます下:

enter image description here

を私は

Chartjs Legend Styling

からインスピレーションを取っ

.chart-legend { 
    visibility: hidden; 
    display: none; 
} 

と試みたが、私はそれが他のいくつかの伝説(下の説明文)に適用されると思います。 上部凡例をカスタマイズ/非表示する方法はありますか?

また、には、x/y軸ラベルの向きを変更するオプションがあります? (斜めに表示するのではなく、垂直に表示するなど)

答えて

4

グラフを作成するときに、グラフオプションを設定できます。可能なオプションの1つがLegend Configurationです。あなたが単にようにグラフの凡例のブール値を定義することができるようだ

私は(特にチャートの一例) documentationを通して見てNG2-チャートを使用していないが
options: { 
    legend: { display: false } 
} 

:凡例を非表示にするには、単にこのようなオプションを使用しますこの:

public lineChartLegend:boolean = true; 

そして、このようなチャートにこの値を追加します。

最後に
<base-chart class="chart" 
        ... 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        ...></base-chart> 

、Chartjsレジェンドスタイリングソリューションにはない、なぜそうな理由chart.js v1.x用に設計されたものですが、ng2-chartsはchart.js v2.xで動作するように見えますが、これは以前のバージョンの大きな変更です。

希望すると便利です。

+0

オプション(ng2-chartsの[options])を追加しました。ありがとうございました! – dragonmnl

関連する問題