2016-05-06 6 views
1

ハイマップで凡例のサイズを変更する良い方法を知っている人はいますか?凡例のwidthとitemWidthプロパティが設定されているバイブルです。私はこの解決策がフォーラムを検索し、このソリューションがチャートのために機能することを発見しました。例: Highcharts set legend heightハイマップで凡例のサイズを変更しますか?

しかし、私はマップのためにそれを行う良い方法を見つけることができません。

http://jsfiddle.net/meo67rhf/

legend: { 
    width: 200, 
    itemWidth: 200 
} 

Iはまた、幅使用DOM方法stetting試みた:。

すなわちdocument.getElementsByClassName( "highcharts-凡例")style.widthは= "200pxの"。

どちらも私のために働いていません。私は凡例の高さと幅を変更しようとしています。どんな助けもありがとうございます。

+0

このようなものを印刷することを意味しますか:http://jsfiddle.net/sgn0b28k/?そうでない場合、要求された伝説のモックアップを投稿できますか? –

答えて

1

あなたはこれで正しい軌道に乗っています。

はい、ハイマップは凡例のサイズも調整できます。私はあなたが何をしようとしているのかは分かりませんが、高さは内部に含まれる要素の数によって自動的に定義されます。 widthitemWidth、およびlayoutの値を変更することで、これを回避できます。

あなたの例では、上記の値を変更すると、異なるレイアウトになります。あなたは、次の取得

width: 300, 
itemWidth: 100, 
layout: 'horizontal', 

enter image description here

白い箱は100のitemWidth設定300の定義されたwidthに取っている個人を意味し、あなたがそれらをシフトするときに何が起こるかを参照してください。凡例のアイテムは定義された幅の1/3を占めます(パーセンテージを使用しないでください;うまくいかない)。

さらに、これらの値をコンテナ要素の割合にすることもできます。スタイルシート宣言でコンテナの幅や高さを定義している場合は、JavaScript変数を設定して実行時にそれらの値を取得し、それに応じて凡例を調整することができます。例えば

'horizontal'layoutを設定

// in your inline stylesheet 
#container: { width: '650px', height: '450px' } 

// variables defined before your chart options 
var chartHeight = $('#container').height(); 
var chartWidth = $('#container').width(); 

// in your legend 
width: chartWidth * 0.3, // 30% of total width 
itemWidth: chartWidth * 0.1, // 10% of total width 

はあなたが値verticalを使用した場合よりも短いの凡例を提供します。

このすべてがお役に立てば幸いです。

関連する問題