如何将系列数据呈现为煎茶图表中的标题

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

现在我将查看字段和浏览字段作为图表中的数字字段，将标题字段作为图表中的类别标题。

我想在将鼠标悬停在该字段上时呈现该字段的标题名称，原因如下。标题太长，不适合图表的 x-axis，所以我用 'meta_id' 代替了标题。因此，当我将鼠标悬停在 x-axis 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'
        ]
    }
]

如何将系列数据呈现为煎茶图表中的标题

How to render series data to a title in sencha charts

javascript

extjs

sencha-touch