0

我正在研究如何在煎茶图上使用智能图例,但图例不显示多列

我太傻了。请帮我 。

感谢所有阮

Ext.onReady(function () {
var panel, chart, legend,
    store = Ext.create('Ext.data.Store', {
    fields: [ 'name', 'data' ],
    data: [
        { name: 'Field 0',  data: Math.random() * 100 },
        { name: 'Field 1',  data: Math.random() * 100 },
        { name: 'Field 2',  data: Math.random() * 100 },
        { name: 'Field 3',  data: Math.random() * 100 },
        { name: 'Field 4',  data: Math.random() * 100 },
        { name: 'Field 5',  data: Math.random() * 100 },
        { name: 'Field 6',  data: Math.random() * 100 },
        { name: 'Field 7',  data: Math.random() * 100 },
        { name: 'Field 8',  data: Math.random() * 100 },
        { name: 'Field 9',  data: Math.random() * 100 },
        { name: 'Field 10', data: Math.random() * 100 },
        { name: 'Field 11', data: Math.random() * 100 },
        { name: 'Field 12', data: Math.random() * 100 }
    ]
});

chart = Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        position: 'absolute',
        id:'chart',
         x: 100,
        y: 100,
        layout: 'fit',
        width: 800,
        height: 850,
        animate: true,
        store: store,
        theme: 'Base:gradients',

        animate: Ext.isIE ? false : true,
        store: store,
        shadow: Ext.isIE ? false : true,
        legend: false,          
        series: [{
            type: 'pie',
            id : 'chart',
            field: 'data',
            showInLegend: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
});

//chart =this.down('chart'); //panel.down('chart');

legend = chart.legend = Ext.create('Ext.ux.chart.SmartLegend', {
    position:       'right',
    chart:          chart,
    rebuild:        true,
    boxStrokeWidth: 1
});

chart.legend.redraw();
chart.redraw();
});
4

1 回答 1

0

sencha 论坛上的另一种选择:Ext​​JS 4 chart legend sizing

于 2013-06-12T07:16:10.520 回答