【问题标题】:ExtJS displaying field name inside chartExtJS 在图表内显示字段名称
【发布时间】: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.
  }          
}

【问题讨论】:

    标签: extjs extjs4.2


    【解决方案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 吗?
    猜你喜欢
    • 1970-01-01
    • 2010-12-27
    • 2013-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-16
    • 2013-09-06
    • 1970-01-01
    相关资源
    最近更新 更多