You found a bug! We've classified it as TOUCH-3611 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default Line series colors fill border even when no fill is set (2.1 RC2 charts)

    Line series colors fill border even when no fill is set (2.1 RC2 charts)


    In ST 2.1 RC2:

    Using a slightly modified version of the example in the docs:
    Code:
    var store = new Ext.data.JsonStore({
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });
    
    var lineChart = new Ext.chart.CartesianChart({
        animate: true,
        store: store,
        axes: [{
            type: 'numeric',
            position: 'left',
            fields: ['data1'],
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            grid: true,
            minimum: 0
        }, {
            type: 'category',
            position: 'bottom',
            fields: ['name'],
            title: {
                text: 'Sample Values',
                fontSize: 15
            }
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            style: {
                stroke: 'red',
                lineWidth: 4
            },
            fill: false,
            xField: 'name',
            yField: 'data1',
            marker: {
                type: 'path',
                path: ['M', -2, 0, 0, 2, 2, 0, 0, -2, 'Z'],
                stroke: 'blue',
                lineWidth: 0
            }    
        }]
    });
    Ext.Viewport.setLayout('fit');
    Ext.Viewport.add(lineChart);
    Results in:
    chartSpillover.png

    Notice the red lines on the left, bottom and right. These shouldn't be there if you have fill turned off. I've found no way to disable them.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    A little more info: I notice this only happens with lineWidth > 2.

  4. #4
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Strike that. It will happen even with lineWidths smaller, as long as the min/max of the axis aren't right up against the datapoints. Here's an example of that:

    Code:
    var store = new Ext.data.JsonStore({
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });
    
    var chart = new Ext.chart.CartesianChart({
                store:Ext.create('Ext.data.JsonStore', {
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                    data: [
                        {'name':1, 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                        {'name':2, 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                        {'name':3, 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                        {'name':4, 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                        {'name':5, 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                    ]
                }),
                axes:[
                    {
                        type:'numeric',
                        position:'left',
                        fields:['data1'],
                        minimum:-2
                    },
                    {
                        type:'numeric',
                        position:'bottom',
                        minimum:0,
                        maximum:6,
                        fields:['name']
                    }
                ],
                series:[
                    {
                        type:'line',
                        style:{
                            stroke:'red',
                            lineWidth:1
                        },
                        xField:'name',
                        yField:'data1',
                    }
                ]
    });
    Ext.Viewport.setLayout('fit');
    Ext.Viewport.add(chart);
    chartSpillover2.png

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    zhangbei is on a distinguished road

      0  

    Default


    Please use `preciseStroke: true` in this case. Put it in the style of the line series.

  6. #6
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    I appreciate the reply and the fix but I have to wonder, "that's it?" Is this something you really expect people to somehow figure out? To say it's poorly documented is an overstatement. Once I knew the property, I know can find the sum total of the documentation for it:

    preciseStroke : Boolean
    'true' if the line uses precise stroke.
    Defaults to: false

    I really don't get this. First off, this kind of behavior is just flat out wrong for the default. Second, this should be thoroughly documented.

    This was marked as CLOSED rather than FIXED, so I assume you're saying "working as intended." If so, I can't help but think this is a terribly bad idea.

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    zhangbei is on a distinguished road

      0  

    Default


    Firstly, I'm really sorry for the documentation. We are continuing working on the documentation as hard as we can.

    Secondly, this default behavior is not "wrong". The default behavior is to create an single path with both fill and stroke so we can save about 50% memory and time. Normally if we set the minimum and maximum inside the range of the data, the extra strokes will be trimmed automatically by the boundary of the surface, but if you set minimum and maximum outside the datarange, then you need to set `preciseStroke` to `true` to hide the extra strokes. The down side is if you have both fill and stroke, we will have to create two different paths.

    So, thank you very much for your feedback. We will add documents on the on minimum and maximum too.

  8. #8
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    I see the performance implications. It's a thorny problem. Look back at my graph in the first post. There the sides and bottom "bleed through" because the stroke width is greater than the normal graph border width. Would you still be able to get the performance improvements if you forced those side/bottom strokes to be width 1 so they can always be covered up even if the stroke of the actual data line is greater than 1?

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar