如何序列数据呈现在煎茶图表标题

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' 
     ] 
    } 
]