1

我正在使用 sencha mvc，我想在我的页面上显示图表。我为此目的使用 chartbeta 插件。我的问题是我已经单独编写了 sencha-touch.js，它工作正常，但是当我添加插件 [再次包含 sencha-touch.js] 时，我的其他功能会受到干扰。

 items : [{
       title : 'Dlist',
       iconCls : 'dlist',
       xtype : 'carousel',
       defaults : {
        styleHtmlContent : true
       },

       items : [{
        title : 'Recently Updated Defects',
        xtype : 'dlist',
       }, {

        title : 'Chart',
        xtype :'piechart',

       }, {
        html : 'Item 3',
        style : 'background-color: #3F66CC'
       }]

      },

      {
       title : 'Test',
       iconCls : 'test',
       xtype : 'carousel',
       defaults : {
        styleHtmlContent : true
       },

       items : [{
        title : 'Recently Updated TestCases',
        xtype : 'test',
        style : 'background-color: #759E60'
       }, {
        html : 'You are on the Second Item' + ['<center><img width="100%" height="100%" src="http://staging.sencha.com/img/sencha.png" /></center>'].join(""),
        style : 'background-color: #5E99CC'
       }, {
        html : 'Item 3',
        style : 'background-color: #3F66CC'
       }]

      }]

对于“饼图”，我调用了以下代码，

Ext.define("MyApp.view.PieChart", {
    extend: "Ext.chart.Chart",
    xtype: "piechart",
    config: {
        xtype: 'piechart',
        animate: true,
        width:600,
        height:600,
        title: 'Pie Chart',
        store: 'SampleStore',
        themeCls: 'pie1',
        theme: 'Demo',
        shadow: false,
        insetPadding: 20,
        legend: {
            position: 'left'
        },
        interactions: [
            {
                type: 'reset',
                confirm: true
            },
            {
                type: 'rotate'
            },
            'itemhighlight',
            {
                type: 'iteminfo',
                gesture: 'longpress',
                listeners: {
                    show: function (interaction, item, panel) {
                        var storeItem = item.storeItem;
                        panel.setHtml(['<ul><li><b>Movie: </b>' + storeItem.get('name') + '</li>', '<li><b>Fans: </b> ' + storeItem.get('fans') + '</li></ul>'].join(''));
                    }
                }
            }
        ],
        series: [
            {
                type: 'pie',
                field: 'fans',
                showInLegend: true,
                highlight: false,
                listeners: {
                    'labelOverflow': function (label, item) {
                        item.useCallout = true;
                    }
                },
                // Example to return as soon as styling arrives for callouts
                callouts: {
                    renderer: function (callout, storeItem) {
                        callout.label.setAttributes({
                            text: storeItem.get('name')
                        }, true);
                    },
                    filter: function () {
                        return false;
                    },
                    box: {
                        //no config here.
                    },
                    lines: {
                        'stroke-width': 2,
                        offsetFromViz: 20
                    },
                    label: {
                        font: 'italic 14px Arial'
                    },
                    styles: {
                        font: '14px Arial'
                    }
                },
                label: {
                    field: 'name'
                }
            }
        ]
    }
});

存储文件，

Ext.define("MyApp.store.SampleStore", {
    extend: "Ext.data.JsonStore",
    config: {
        fields: ['name', 'fans'],
        data: [
            {'name':'Star Wars', 'fans': 9500},
            {'name':'Star Trek', 'fans': 2050},
            {'name':'Roadhouse', 'fans': 6600}
        ]
    }
});

请建议..

4

0 回答 0