Extjsを使用して環状ゲージチャートの真ん中に凡例を追加

Question

私はextjsチャートシリーズを使用して円形ゲージを描画しました。私はそのゲージの価値をその真ん中に示すことを望みますが、私は成功しません。誰も私を助けることができますか？ここで

は、私が試したコードです：

{ 
    xtype: 'polar', 
    width: 60, 
    height: 60, 
    background: '#00c6c9', 
    style: {left:0, right:0}, 
    series: { 
      type: 'gauge', 
      minimum: 0, 
      maximum: 30, 
      value: 10, 
      colors: ['#25a2b6', 'lightgrey'], 
      donut: 75, 
      background: '#00c6c9', 
      totalAngle: Math.PI * 2, 
      style: {left:0, right:0}, 
      needleLength: 100 
      /*, 
      renderer: function(sprite, record, attributes, index, store) { 
       var sprite2 = Ext.create('Ext.draw.Sprite', { 
       type: 'text', 
       text: Math.floor(attributes.value), 
       font: '16px Arial', 
       x: 30, 
       y: 30 
       }); 
       sprite2.show(true);  
       return attributes; 
      }, 
      label: { 
       field: 'value', 
       display: 'middle' 
      }*/ 
    } 
} 

私はちょうどシリーズの値が「10」表示したいです。コメントでは、レンダラー関数とラベルプロパティを追加しようとしました。このラベルでは、 "field： 'value'"と書くことはできないと思いますが、フィールドを定義する必要はないので、何を使うのか分かりません。ここで

感謝

Answer 1

がソリューションである、あなたは、チャートのレンダリング機能であなたのスプライトを変更し、それを再描画し、X、Y、値や他のもの

Ext.create({ 
    xtype: 'polar', 
    renderTo: document.body, 
    width: 160, 
    height: 160, 
    background: '#00c6c9', 
    style: { 
     left: 0, 
     right: 0 
    }, 
    listeners:{ 
     render: function(chart){ 
      var sprite=Ext.clone(chart.getSprites()[0]); 
      //modify sprite here 
      sprite.text=''+chart.getSeries()[0].config.value; 
      chart.setSprites(sprite); 
      chart.redraw(); 
     } 
    }, 
    sprites: [{ 
     type: 'text', 
     x: 58, 
     y: 95, 
     text: 'test', 
     fontSize: 40, 
     fillStyle: 'white' 
    }], 
    series: { 
     type: 'gauge', 
     minimum: 0, 
     maximum: 30, 
     value: 10, 
     colors: ['#25a2b6', 'lightgrey'], 
     donut: 75, 
     background: '#00c6c9', 
     totalAngle: Math.PI * 2, 
     style: { 
      left: 0, 
      right: 0 
     }, 
     needleLength: 100 
    } 

    });