如何在Extjs 4中显示组线图中的提示?

时间:2011-06-08 12:04:37

标签: charts extjs4 line

我正在使用EXTJS 4.0,我希望在用户移动到我的行时显示提示图表我已经创建了Group Line Chart并且还创建了Rich Tips但是现在我的问题是当我为每个系列创建提示并运行时在浏览器中,我得到三行的空白提示图表中的四个,但第四行图表显示正确的丰富提示。我的示例代码是:

面板和折线图代码:

var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
    width: 800,
    height: 600,
    hidden: false,
    id:'ChequesDetailsChartsMonthWiseWinId',
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: ChequesDetailsLineChartsMonthwiseStore,
        shadow: true,
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
            title: 'Amounts (In Rs)',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['month'],
            title: 'Month of the Year'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Honorarium',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');

                    this.setTitle("Information for " + 'Honorarium  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
            xField: 'month',
            yField: 'Program Expenses',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
                 tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');

                    this.setTitle("Information for " + 'Program Expenses  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
          //  fill: true,
            xField: 'month',
            yField: 'Assets Amount',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
             tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');

                    this.setTitle("Information for " + 'Assets Amount  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: true,
           // fill: true,
            xField: 'month',
            yField: 'Human Resource',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            tips: {
              trackMouse: true,
              width: 600,
              height: 170,
              layout: 'fit',
                items: {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [pieChart,grid]
                },
              renderer: function(storeItem, item) {

                    //alert(storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
                    ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
                    ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');

                    this.setTitle("Information for " + 'Human Resource  - Month :' +storeItem.get('month') );
              }
            } // tips ends here 
        }]
    }
});

示例预览是: 折线图:This tips is Display in All Three chart

折线图:This tips i want to display in all chart which is appear in Last Line chart

请向我提供如何在所有图表中显示提示或我做错的地方的解决方案。

0 个答案:

没有答案