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

How to render series data to a title in sencha charts

本文关键字:标题 系列 数据      更新时间:2023-09-26

我有一个从我的商店检索数据的图表,这四条信息如下

型号代码

Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
    'Ext.data.Field'
],
config: {
    fields: [
        {
            name: 'meta_id'
        },
        {
            name: 'title'
        },
        {
            name: 'viewed'
        },
        {
            name: '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'
                            }
                        }

正如您在上面的代码中看到的,我有一个渲染函数,但我不知道该放入什么

系列的使用技巧

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