如何序列數據呈現在煎茶圖表標題

Question

我有一個圖表檢索從我的存儲數據，信息的四位以下

型號代碼

Ext.define('QvidiApp.model.ClipsViews', { 
extend: 'Ext.data.Model', 

requires: [ 
    'Ext.data.Field' 
], 

config: { 
    fields: [ 
     { 
      name: 'meta_id' 
     }, 
     { 
      name: 'title' 
     }, 
     { 
      name: 'viewed' 
     }, 
     { 
      name: 'glances' 
     } 
    ] 
} 
}); 

現在我的觀察字段和glances字段作爲圖表中的數字字段，並將標題字段作爲圖表中的類別標題。

我想渲染字段的標題名稱，當我把鼠標懸停在它上面，原因id這個。這些標題太長，無法放入圖表的x軸，因此取代了我放置'meta_id'的標題。所以，當我將鼠標懸停在x軸meta_id場我想要顯示

所以標題名稱例如

meta_id 100等於標題值###

這裏是我的海圖編至今

{ 
          xtype: 'chart', 
          centered: true, 
          height: '150%', 
          colors: [ 
           '#24ad9a', 
           '#7c7474', 
           '#a66111' 
          ], 
          store: 'ClipsViewed', 
          axes: [ 
           { 
            type: 'category', 
            fields: [ 
             'meta_id' 
            ], 
            grid: true, 
            label: { 
             rotate: { 
              degrees: 0 
             }, 
             font: '7px' 
            }, 
            title: 'Clips' 
           }, 
           { 
            type: 'numeric', 
            fields: [ 
             'viewed' 
            ], 
            grid: true, 
            position: 'left', 
            title: 'Amount' 
           } 
          ], 
          series: [ 
           { 
            type: 'bar', 
            renderer: function(sprite, config, rendererData, index) { 

            }, 
            style: { 
             minGapWidth: 1, 
             minBarWidth: 60, 
             maxBarWidth: 70, 
             opacity: 0.80 
            }, 
            xField: 'meta_id', 
            yField: [ 
             'viewed', 
             'glances' 
            ] 
           } 
          ], 
          interactions: [ 
           { 
            type: 'panzoom' 
           } 
          ], 
          legend: { 
           xtype: 'legend' 
          } 
         } 

正如你可以在上面的代碼中看到我有一個渲染功能，但我不知道該怎麼把它付諸表決

Answer 1

使用技巧系列

series: [ 
    { 
     type: 'bar', 

     tips: { 
      trackMouse: true, 
      width: 74, 
      height: 38, 
      renderer: function(storeItem, item) { 
       this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title')); 
      } 
     }, 
     style: { 
      minGapWidth: 1, 
      minBarWidth: 60, 
      maxBarWidth: 70, 
      opacity: 0.80 
     }, 
     xField: 'meta_id', 
     yField: [ 
      'viewed', 
      'glances' 
     ] 
    } 
]