Question

我有一个ExtJS网格和一个Jquery Gauge图表。我想在图表和网格之间进行交互。如果我们选择一行网格，那么相应的更改将反映在图表中。这是网格的代码......

Ext.define('Gamma.view.EdgesGridChart' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.edgesGridChart',
id: 'edgesGridChart',

height: 300,
width: Ext.getBody().getViewSize().width*0.4,
animate: true,
shadow: true,
title : 'Call Information',
store : 'Edges',
loadMask: true,
autoheight: true,
theme: 'Base',
dockedItems: [{
    xtype: 'pagingtoolbar',
    store: 'Edges',  
    dock: 'bottom',
    displayInfo: true,
    items: [
            { 
                xtype: 'tbseparator'
            }
    ]
}],
plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1
         })        
],
selModel: {
    selType: 'cellmodel'
},
initComponent: function() {
    this.columns = [{
        header: 'SOURCE', 
        dataIndex: 'source',
        flex: 1
    },{
        header: 'TARGET', 
        dataIndex: 'target',
        flex: 1
    }, {
        header: 'DIR',
        dataIndex: 'dir',
        flex: 1
    }, {
        header: 'PEG', 
        dataIndex: 'peg', 
        flex: 1
    }, {
        header: 'WEIGHT',
        dataIndex: 'weight',
        flex: 1
    }];
this.callParent(arguments);

}

}）;

这是计量表的代码......

 $(document).ready(function(){
        var gradient1 = {
            type: 'linearGradient',
            x0: 0,
            y0: 0.5,
            x1: 1,
            y1: 0.5,
            colorStops: [{ offset: 0, color: '#C5F80B' },
                         { offset: 1, color: '#6B8901'}]
        };

        var gradient2 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,
            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#FF3366' },
                         { offset: 1, color: '#B2183E'}]
        };

        var anchorGradient = {
            type: 'radialGradient',
            x0: 0.35,
            y0: 0.35,
            r0: 0.0,
            x1: 0.35,
            y1: 0.35,
            r1: 1,
            colorStops: [{ offset: 0, color: '#4F6169' },
                         { offset: 1, color: '#252E32'}]
        };

        $('#jqRadialGauge').jqRadialGauge({
            background: '#F7F7F7',
            border: {
                lineWidth: 6,
                strokeStyle: '#76786A',
                padding: 16
            },
            shadows: {
                enabled: true
            },
            anchor: {
                visible: true,
                fillStyle: anchorGradient,
                radius: 0.05
            },
            tooltips: {
                disabled: false,
                highlighting: true
            },
            annotations: [
                            {
                                text: 'Wing Span',
                                font: '18px sans-serif',
                                horizontalOffset: 0.5,
                                verticalOffset: 0.8
                            }
                         ],
            scales: [
                     {
                         minimum: 0,
                         maximum: 150,
                         startAngle: 140,
                         endAngle: 400,
                         majorTickMarks: {
                             length: 12,
                             lineWidth: 2,
                             interval: 10,
                             offset: 0.84
                         },
                         minorTickMarks: {
                             visible: true,
                             length: 8,
                             lineWidth: 2,
                             interval: 2,
                             offset: 0.84
                         },
                         labels: {
                             orientation: 'horizontal',
                             interval: 10,
                             offset: 1.00
                         },
                         needles: [
                                    {
                                        value: 56,
                                        type: 'pointer',
                                        outerOffset: 0.8,
                                        mediumOffset: 0.7,
                                        width: 10,
                                        fillStyle: '#252E32'
                                    }
                                  ],
                         ranges: [
                                    {
                                        outerOffset: 0.82,
                                        innerStartOffset: 0.76,
                                        innerEndOffset: 0.68,
                                        startValue: 0,
                                        endValue: 100,
                                        fillStyle: gradient1
                                    },
                                    {
                                        outerOffset: 0.82,
                                        innerStartOffset: 0.68,
                                        innerEndOffset: 0.60,
                                        startValue: 110,
                                        endValue: 150,
                                        fillStyle: gradient2
                                    }
                                 ]
                     }
                    ]
        });

        $('#jqRadialGauge').bind('tooltipFormat', function (e, data) {

            var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '</br>';

            switch (data.elementType) {

                case 'needle':
                    tooltip += 'Value: ' + data.value;
                    break;
                case 'range':
                    tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
            }

            return tooltip;
        });
    });

Answer 1

可以使用以下代码更新jqRadialGauge插件：

            var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
            scales[0].needles[0].value = Math.random() * 100;

            $('#jqRadialGauge').jqRadialGauge('update');

如果要在单击ExtJS网格行时更新jqRadialGauge的针，可以尝试使用以下代码：

   $('#edgesGridChart').on('rowclick', function(grid, rowIndex, columnIndex, e) {
            var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
            scales[0].needles[0].value = rowIndex;

            $('#jqRadialGauge').jqRadialGauge('update');
        }, this);

第二个代码段中的代码显示了如何将jqRadialGauge第一针设置为所单击行的行索引。

最诚挚的问候，
马克西姆米列夫

免责声明：我为jqChart工作。

Answer 2

完成捕获点击事件后，请尝试使用此方法。

 selectionchange : function(){
    var grid = Ext.getCmp('edgesGridChart');
    var selectedRecords= grid.getView().getSelectionModel().getSelection();
    myData = selectedRecords[0].get('columnName');

    var jquery= $('#jqRadialGauge').jqRadialGauge('option', 'scales');
    jquery[0].needles[0].value = myData ;
    $('#jqRadialGauge').jqRadialGauge('update');

},

Answer 3

这是对如何实现的高级解释......实际实施会有所不同。

在行上单击网格，设置值并更新jquery模型的数据，之后您需要找到一种在更新数据模型时刷新图表的方法。

所有这些都可以使用从extjs行编辑/点击事件触发的jquery自定义事件来完成。

如何关联ExtJS网格和Jquery图表

3 个答案: