如何在Sencha Touch Chart上使用项目信息交互

时间:2016-03-09 05:04:10

标签: javascript extjs sencha-touch sencha-charts

我有一个包含以下代码的图表

{
                            xtype: 'chart',
                            centered: true,
                            height: '100%',
                            id: 'ClipsViewedChart',
                            width: '100%',
                            modal: false,
                            colors: [
                                '#24ad9a',
                                '#7c7474',
                                '#a66111'
                            ],
                            store: 'ClipsViewed',
                            axes: [
                                {
                                    type: 'category',
                                    fields: [
                                        'meta_id'
                                    ],
                                    grid: true,
                                    label: {
                                        rotate: {
                                            degrees: 0
                                        },
                                        font: '10px'
                                    },
                                    title: 'Clips'
                                },
                                {
                                    type: 'numeric',
                                    fields: [
                                        'viewed',
                                        'glances'
                                    ],
                                    grid: true,
                                    position: 'left',
                                    title: 'Amount'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    label: {
                                        display: 'outside',
                                        field: 'title',
                                        orientation: 'vertical',
                                        'text-anchor': 'middle',
                                        font: '10px'
                                    },
                                    style: {
                                        minGapWidth: 1,
                                        minBarWidth: 60,
                                        maxBarWidth: 70,
                                        opacity: 0.80
                                    },
                                    labelField: 'title',
                                    xField: 'meta_id',
                                    yField: [
                                        'viewed',
                                        'glances'
                                    ]
                                }
                            ],
                            interactions: [
                                {
                                    type: 'panzoom'
                                },
                                {
                                    type: 'iteminfo'
                                }
                            ],
                            legend: {
                                xtype: 'legend'
                            }
                        }

我需要在我的图表中添加一个ontap项目交互,但是我不知道该怎么做,我需要在我的图表中显示其中一个系列的系列数据

这是我的型号代码

Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',

requires: [
    'Ext.data.Field'
],

config: {
    fields: [
        {
            name: 'meta_id'
        },
        {
            name: 'title'
        },
        {
            name: 'viewed'
        },
        {
            name: 'glances'
        }
    ]
}
});

到目前为止,我已将此添加到我的图表中

onItemInfoShow: function(iteminfo, item, panel, eOpts) {
        panel.update(item.get('meta_id') + '<br />' + item.get('title'));
}

我只想知道如何在我的图表上正确呈现此信息,信息是标题及其meta_id

0 个答案:

没有答案