Highchart + Extjs + chart Updates

2019-09-20 09:46发布

问题:

I setup this jsfiddle to show you an issue regarding Extjs and Highchart:

http://jsfiddle.net/xea0w8n3/21/

var store = new Ext.data.ArrayStore({
    fields: ['month', 'value'],
    data : [
        ['jan', 1],
        ['feb', 2],
        ['mar', 3],
        ['apr', 4],
        ['mai', 5],
        ['jun', 6],
        ['jul', 16],
        ['aug', 2],
        ['sep', 7],
        ['oct', 4],
        ['nov', 3],
        ['dec', 11]
    ]
});


var chart = Ext.create('Chart.ux.Highcharts', {
    id:'chart',
    series:[{
        dataIndex: 'value'
    }],
    xField: 'month',
    store: store,
    chartConfig: {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'A simple graph'
        },
        xAxis: {
            plotLines: [{
                color: '#FF0000',
                width: 5,
                value: 'mar'
            }]
        }
    }
});

store.load();


Ext.create('Ext.window.Window', {
    title: 'Highchart Testing',
    id:'window',
    closable : true,
    width: 300, 
    height: 400,
    layout:'fit',
    anchor:'100%',
    items:[chart],
    tbar:[
        {
            xtype:'button',
            text:'Add PlotLine',
            handler: function(){


              Ext.getCmp('chart').chart.yAxis[0].addPlotLine({
                      value:'12',
                      width: '2',
                      dashStyle: 'longdashdot',
                    color: 'red'
            });

            }
        }
    ]
}).show();

If I add a Plot Line and resize the window the line disappear :(

Any ideas to keep the plotline while window is open?

Thanks in advance!

Regards

回答1:

I've had a similar issue with the line disappearing when I move the window. Does that also happen for you? I worked around the problem by hiding and showing the chart on the window's move event. It is a bit silly but it worked for me.

listeners: {
    // For me it was the move event
    resize: function (window) {
        var chart = Ext.getCmp('chart');
        chart.hide();
        chart.show();
    }
}