ExtJS 在图表内显示字段名称

Posted 2023-02-26

【中文标题】ExtJS 在图表内显示字段名称

【英文标题】：ExtJS displaying field name inside chart

【发布时间】：2013-07-31 18:30:28

【问题描述】：

考虑以下堆积条形图的example。通过在系列中添加标签配置，我可以在条形图中显示每个字段（喜剧、动作、戏剧、惊悚片）的计数，但我还如何显示字段名称？ label 的渲染器配置属性似乎没有多大用处，因为该函数仅接收计数作为参数。

label:
  display:'insideStart'  ,
  field:[null, null, 'drama', 'thriller'],
  renderer:function(item)
    //For this case, item will be an int value. Thus, not sure how useful it is 
    //as we cannot get the field name from it.
            

【参考方案1】：

实际上，渲染器函数传递的是a lot more arguments 而不仅仅是值。这些参数与onPlaceLabel 方法相同，只是在开头添加了值，并且在此处进行了更好的记录。

我们得到了系列中字段的index，事实上，series 也可用于item 参数。有了它，我们就可以实现您想要的：

label: 
    display:'insideStart'
    ,field:[null, null, 'drama', 'thriller']
    ,renderer: function(value, label, storeItem, item, i, display, animate, index) 
        var series = item.series,
            titles = series.title;
        return titles && titles[index] || series.yField[index];
    

我首先尝试获取标题，因为在现实生活中，我不会向用户显示原始字段名称。为了记录，为了做到这一点，这是整个系列的配置方式。它不会出现在文档中，除了用户评论...

series: [
    type: 'bar',
    axis: 'bottom',
    gutter: 80,
    xField: 'year',
    yField: ['comedy', 'action', 'drama', 'thriller'],
    title: ['Comédie', 'Action', 'Drame', 'Thriller'],
    stacked: true,
    label: 
        display:'insideStart'
        ,field:[null, null, 'drama', 'thriller']
        ,renderer: function(value, label, storeItem, item, i, display, animate, index) 
            var series = item.series,
                titles = series.title;
            return titles && titles[index] || item.yField;
        
    
]

【讨论】：

渲染器函数中除值外的所有参数均未定义。

您确定您使用的是 Ext4.2 吗？