2016-10-11 18 views
3

おはよう!私はこの日をほとんど役に立たないように見ていましたので、もっと大きな聴衆にアピールする時間です...ハイチャートSolidGaugeラベルのサイズ変更の問題

私は、ExtJS 4.2.2コンテナクラスでラップされたハイチャートの "ソリッドゲージ"チャートを使用しています。ソリッドゲージを作成するときに、サイズを変更しようとするまですべてが正常に見えます。サイズを変更すると、シリーズのラベルがゲージの上と外に移動します。

グッド:(リサイズ後)

enter image description here

悪い:

enter image description here

犯人は私が最初に "79%" のショーを設定する必要があり、 "Y" 値であり、ゲージの真ん中に、その下の代わりに、

me.series = [{ 
     name: 'Uptime', 
     data: [80], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:2.5vw;color:black"' + 
      '>{y}%</span><br/></div>', 
      x: 0, 
      y: -65, 
      borderWidth: 0, 
      useHTML: true 
     }, 
     tooltip: false, 
     type: 'solidgauge', 
     valueField: 'uptime' 
    }]; 

「Y:-65」は、サイズ変更時に「79%」がチャートの上に移動する原因となります。 XとYの値を0に設定すると、テキストが細かくサイズ変更されます(ラベルがゲージよりもはるか遠すぎます)。

最初に[0,0]以外に配置されたときに、そのラベルをグラフで正しくサイズ変更する方法はわかりません。私はchart.Renderオブジェクト、さまざまなCSS設定、ExtJSイベントハンドラのオーバーライドなどを見てきました。

ラベルをゲージの中にセンタリングし、チャートが正しく配置されるようにする方法はありませんか?サイズが変更されていますか?

ご協力いただきありがとうございます。

答えて

2

チャートがキャンバスであり、レンダリング時にdomの上に印刷されているように(ブラウザのhtml domでそれを調べるように)、ダッシュボードを実行しているので、ラベルのテキストサイズで2.5vwのようなHTMLプロパティは動作しません別のチャートで私は再びラベルを追加し、ラベルを削除する問題を解決し、そして呼び出し:

chart.redraw(); 

次の私は内線4

を使用していた、多分何かがchangetで、ラベルのフォントサイズをリセットするために私の古いコードを書きます
setFieldTitleHeight: function(){ 
    var view=this.getView(), 
     panelHeight=view.height; 
    var newFontSize=Math.floor((panelHeight/290)*16); 
    view.items.items[0].getAxes()[0].getTitle().setAttributes({fontSize: newFontSize+'px'}); 
}, 

setDataLabelSize:function(){ 
    var view=this.getView(), 
     panelHeight=view.height, 
     serie=view.items.items[0].getSeries()[0], 
     assi=view.items.items[0].getAxes(); 

    var newFontSize=Math.floor((panelHeight/290)*16); 
    var label=serie.config.label; 
    serie.config.label.fontSize= newFontSize+'px'; 
    serie.setLabel(label); 
    Ext.iterate(assi,function(item,index,array){ 
     item.getLabel().setAttributes({fontSize:newFontSize+'px'}); 
    },this); 
}, 
関連する問題