在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 
    } 

    });