Question

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

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

Answer 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;
        }
    }
}]

ExtJS在图表中显示字段名称

1 个答案: