Extjs改變標籤在圖表（酒吧，派...）

Question

我怎麼能改變標籤上的精靈？我發現系列內我可以有以下，我可以改變渲染，但問題是，我也需要相應的商品。

label: { 
    display: 'insideEnd', 
    field: 'litres', 
    renderer: function(n) { 
    return n; 
    }, 
    orientation: 'horizontal', 
    color: '#333', 
    'text-anchor': 'middle' 
} 

我還發現here有兩個功能：onCreateLabel和onPlaceLabel，但我並沒有發現使用它們的方式。

任何幫助？

Answer 1

onCreateLabel和onPlaceLabel在系列配置被使用。你必須做這樣的事情：

series: [{ 
     // ... 
     label: { 
       field: 'data1', 
       renderer: function(val) { 
         return val; 
       } 
     }, 
     onCreateLabel: function(storeItem, item, i, display) { 
       var me = this, 
         group = me.labelsGroup, 
         config = me.label, 
         bbox = me.bbox, 
         endLabelStyle = Ext.apply(config, me.seriesLabelStyle); 

       return me.chart.surface.add(Ext.apply({ 
         'type': 'text', 
         'text-anchor': 'middle', 
         'group': group, 
         'x': item.point[0], 
         'y': bbox.y + bbox.height/2 
       }, endLabelStyle || {})); 
     }, 
     onPlaceLabel: function(label, storeItem, item, i, display, animate, index) { 
     var me = this, 
      chart = me.chart, 
      resizing = chart.resizing, 
      config = me.label, 
      format = config.renderer, 
      field = config.field, 
      bbox = me.bbox, 
      x = item.point[0], 
      y = item.point[1], 
      bb, width, height; 

     label.setAttributes({ 
      text: format(storeItem.get(field[index])), 
      hidden: true 
     }, true); 

     bb = label.getBBox(); 
     width = bb.width/2; 
     height = bb.height/2; 

     x = x - width < bbox.x? bbox.x + width : x; 
     x = (x + width > bbox.x + bbox.width) ? (x - (x + width - bbox.x - bbox.width)) : x; 
     y = y - height < bbox.y? bbox.y + height : y; 
     y = (y + height > bbox.y + bbox.height) ? (y - (y + height - bbox.y - bbox.height)) : y; 

     if (me.chart.animate && !me.chart.resizing) { 
      label.show(true); 
      me.onAnimate(label, { 
       to: { 
        x: x, 
        y: y 
       } 
      }); 
     } else { 
      label.setAttributes({ 
       x: x, 
       y: y 
      }, true); 
      if (resizing) { 
       me.animation.on('afteranimate', function() { 
        label.show(true); 
       }); 
      } else { 
       label.show(true); 
      } 
     } 
    } 
     // ... 
} 

複製和粘貼onCreateLabel，並從上面的代碼（或ExtJS的源）onPlaceLabel然後改變他們你想要的方式。