Ext Js Slider或Multi Slider with Chart控件

时间:2016-11-07 12:34:54

标签: javascript extjs extjs4

我们有没有办法让滑块与图表(即条形图或折线图)?在更改滑块时(假设多个滑块具有最小值和最大值),必须更改图形。

假设滑块控件位于下方,而图表位于上方。与我的要求相关的东西我发现在以下链接。任何人都建议我如何实现这是extjs 4及以下

例如https://developers.google.com/chart/interactive/docs/gallery/controls

1 个答案:

答案 0 :(得分:0)

您可以使用我考虑过您的要求的以下代码段以及https://developers.google.com/chart/interactive/docs/gallery/controls上的示例

Ext.application({
    name : 'Fiddle',

    launch : function() {
        //default global data
        var data = [{ 'name': 'Michael',   'count': 5 },
                { 'name': 'Elisa',   'count':  7 },
                { 'name': 'Robert', 'count':  3 },
                { 'name': 'John',  'count':  2 },
                { 'name': 'Jessica',  'count': 6 },
                { 'name': 'Aaron',  'count': 1 },
                { 'name': 'Margareth',  'count': 8 }
        ];

        //custom function to filter data by new sliderVal
        var filterDataByCount = function(sliderVal) {
            var filteredData = [];
            for(var i = 0; i < data.length; i++) {
                //filter data whose count is less than sliderVal
                if(data[i].count < sliderVal) {
                    filteredData.push(data[i]);
                }
            }
            return filteredData;
        };

        //Define a store with fields name, count of cookies
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'count'],
            data: data
        });

        //Define a pie chart with above store
        var chart = Ext.create('Ext.chart.Chart', {
            width: 500,
            height: 350,
            animate: true,
            store: store, //store set to one that defined above
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'count',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ' ate ' + storeItem.get('count') + ' cookies');
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    font: '18px Arial'
                }
            }]
        });

        //Define slider
        var slider = Ext.create('Ext.slider.Single', {
            width: 200,
            value: 50,
            increment: 1,
            minValue: 0,
            maxValue: 10,
            listeners: {
                changecomplete: function(slider, newVal) {
                    //reload chart with filteredData on slider change
                    chart.store.loadData(filterDataByCount(newVal));
                    //Ideally u should be loading filtered data by doing call to backend with queryparam set to "newVal"
                }
            }
        });

        //Define panel that is rendered on body and contains chart, slider items
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            layout: 'vbox',
            items: [
                chart,
                slider
            ]
        })
    }
});

您可以参考相同Fiddle link

的链接