Results 1 to 2 of 2

Thread: Sprite Style renderer ST2.2

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    43
    Answers
    1

    Default Sprite Style renderer ST2.2

    Hi,
    I'm using ST2.2.1 and I'm struggling to use the renderer function for styling the markers.
    From ST 2.1 to 2.2 there have been some changes in this area and my code won't work anymore. The markers don't get styled.

    Is anyone able to make the example below work in 2.2 ?
    http://try.sencha.com/touch/2.1.0/gu...11/viewer.html

    Code:
    /*global Ext:false */
    Ext.application({
        launch: function () {
            // Create a panel to put the chart in.
            Ext.create('Ext.chart.CartesianChart', {
                fullscreen: true,
                innerPadding: 15,
                store: {
                    fields: ['name', 'g1', 'g2', 'g3', 'g4', 'g5'],
                    data: [{
                        "name": "Item-0",
                        "g1": 18.34,
                        "g2": 0.04,
                        "g3": 22.35,
                        "g4": 10.50,
                        "g5": 18.42
                    }, {
                        "name": "Item-1",
                        "g1": 2.67,
                        "g2": 14.87,
                        "g3": 0.41,
                        "g4": 19.15,
                        "g5": 1.64
                    }, {
                        "name": "Item-2",
                        "g1": 1.90,
                        "g2": 5.72,
                        "g3": 14.80,
                        "g4": 38.93,
                        "g5": 2.77
                    }, {
                        "name": "Item-3",
                        "g1": 21.37,
                        "g2": 2.13,
                        "g3": 12.98,
                        "g4": 63.82,
                        "g5": 18.85
                    }, {
                        "name": "Item-4",
                        "g1": 2.67,
                        "g2": 8.53,
                        "g3": 4.44,
                        "g4": 87.39,
                        "g5": 27.23
                    }, {
                        "name": "Item-5",
                        "g1": 18.22,
                        "g2": 4.62,
                        "g3": 8.26,
                        "g4": 97.63,
                        "g5": 34.37
                    }, {
                        "name": "Item-6",
                        "g1": 28.51,
                        "g2": 12.43,
                        "g3": 28.67,
                        "g4": 108.29,
                        "g5": 47.84
                    }, {
                        "name": "Item-7",
                        "g1": 34.43,
                        "g2": 4.40,
                        "g3": 9.89,
                        "g4": 127.27,
                        "g5": 36.90
                    }, {
                        "name": "Item-8",
                        "g1": 21.65,
                        "g2": 13.87,
                        "g3": 5.44,
                        "g4": 112.49,
                        "g5": 16.29
                    }, {
                        "name": "Item-9",
                        "g1": 12.98,
                        "g2": 35.44,
                        "g3": 16.37,
                        "g4": 135.54,
                        "g5": 16.78
                    }, {
                        "name": "Item-10",
                        "g1": 22.96,
                        "g2": 38.70,
                        "g3": 18.15,
                        "g4": 114.96,
                        "g5": 8.51
                    }, {
                        "name": "Item-11",
                        "g1": 0.49,
                        "g2": 51.90,
                        "g3": 19.98,
                        "g4": 95.00,
                        "g5": 9.69
                    }, {
                        "name": "Item-12",
                        "g1": 20.87,
                        "g2": 62.07,
                        "g3": 25.96,
                        "g4": 87.79,
                        "g5": 3.18
                    }, {
                        "name": "Item-13",
                        "g1": 25.10,
                        "g2": 78.46,
                        "g3": 26.04,
                        "g4": 91.54,
                        "g5": 12.41
                    }, {
                        "name": "Item-14",
                        "g1": 16.87,
                        "g2": 56.80,
                        "g3": 1.39,
                        "g4": 71.78,
                        "g5": 16.54
                    }]
                },
                background: 'white',
    
    
                // Set rotation and double tap reset interactions.
                interactions: ['rotate'],
    
    
                axes: [{
                    type: 'category',
                    position: 'bottom',
                    hidden: true
                }],
                series: [{
                    type: 'scatter',
                    xField: 'g1',
                    yField: 'g2',
                    marker: {
                        type: 'circle',
                        radius: 5,
                        fillStyle: 'rgba(0,255,0,0.2)',
                        strokeStyle: 'rgba(0,0,0,0.8)',
                        lineWidth: 1
                    },
                    style: {
                        renderer: function (target, sprite, index, storeItem) {
                            target.radius = interpolate(storeItem.data.g3, 0, 30, 5, 12);
                            target.fillOpacity = interpolate(storeItem.data.g3, 0, 30, 1, 0.7);
                            target.fill = interpolateColor(storeItem.data.g3, 0, 200);
                        }
                    }
    
    
                }]
            });
    
    
            function interpolate(lambda, minSrc, maxSrc, minDst, maxDst) {
                return minDst + (maxDst - minDst) * Math.max(0, Math.min(1, (lambda - minSrc) / (maxSrc - minSrc)));
            }
    
    
            var fromHSL = Ext.draw.Color.fly('blue').getHSL(),
                toHSL = Ext.draw.Color.fly('red').getHSL();
            fromHSL[2] = 0.0;
            fromHSL[2] = 0.3;
    
    
            function interpolateColor(lambda, minSrc, maxSrc) {
                return Ext.draw.Color.fly(0, 0, 0, 0).setHSL(
                interpolate(lambda, minSrc, maxSrc, fromHSL[0], toHSL[0]), interpolate(lambda, minSrc, maxSrc, fromHSL[1], toHSL[1]), interpolate(lambda, minSrc, maxSrc, fromHSL[2], toHSL[2])).toString();
            }
        }
    });
    in ST2.2 the style function is:
    Code:
    style: {                    renderer: function (sprite, config, rendererData, index) {
                            // How to code the same function as in 2.1 ? 
                        }
    Thanks!

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Location
    Holland
    Posts
    98
    Answers
    2

    Default

    Were you able to figure this out? Thank you,

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •