Extjs中Chart利用series的tips属性设置鼠标划过时显示数据

效果如下：

从官网找到的例子，大家参考下吧。源码：

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {
    var pieModel = [{
        name: 'data1',
        data: 10
    }, {
        name: 'data2',
        data: 10
    }, {
        name: 'data3',
        data: 10
    }, {
        name: 'data4',
        data: 10
    }, {
        name: 'data5',
        data: 10
    }];

    var pieStore = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: pieModel
    });

    var pieChart = Ext.create('Ext.chart.Chart', {
         100,
        height: 100,
        animate: false,
        store: pieStore,
        shadow: false,
        insetPadding: 0,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            field: 'data',
            showInLegend: false,
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '9px Arial'
            }
        }]
    });

    var gridStore = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: pieModel
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: gridStore,
        height: 130,
         480,
        columns: [{
            text: 'name',
            dataIndex: 'name'
        }, {
            text: 'data',
            dataIndex: 'data'
        }]
    });

    var panel1 = Ext.create('widget.panel', {
         800,
        height: 400,
        title: 'Line Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'chart',
            animate: true,
            shadow: true,
            store: store1,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1'],
                title: false,
                grid: true
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: false
            }],
            series: [{
                type: 'line',
                axis: 'left',
                gutter: 80,
                xField: 'name',
                yField: ['data1'],
                tips: {//对这个属性进行配置
                    trackMouse: true,
                     580,
                    height: 170,
                    layout: 'fit',
                    items: {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [pieChart, grid]
                    },
                    renderer: function (klass, item) {//这里是设置了显示数据时的样式
                        var storeItem = item.storeItem,
                            data = [{
                                name: 'data1',
                                data: storeItem.get('data1')
                            }, {
                                name: 'data2',
                                data: storeItem.get('data2')
                            }, {
                                name: 'data3',
                                data: storeItem.get('data3')
                            }, {
                                name: 'data4',
                                data: storeItem.get('data4')
                            }, {
                                name: 'data5',
                                data: storeItem.get('data5')
                            }],
                            i, l, html;

                        this.setTitle("Information for " + storeItem.get('name'));
                        pieStore.loadData(data);
                        gridStore.loadData(data);
                        grid.setSize(480, 130);
                    }
                }
            }]
        }]
    });
});

源码可以到网上下载，地址：http://try.sencha.com/extjs/4.0.7/examples/charts/tipschart/