Обновление диаграммы новыми данными в App SDK 2.0

Question

Я использую диаграмму для визуализации данных в TimeboxScopedAppи я хочу обновить данные при изменении области действия. Более грубый подход использования remove() затем перерисовка диаграммы, как описано здесь, оставляет меня с наложенной маской "Загрузка...", но в остальном работает. Естественный подход использования нативной Highchart redraw() метод будет моим предпочтением, только я не знаю, как получить доступ к реальному объекту Highchart, а не к обертке App SDK.

Вот соответствующая часть кода:

var chart = Ext.getCmp('componentQualityChart');
if (chart) {
    var chartCfg = chart.getChartConfig();
    chartCfg.xAxis.categories = components;
    chart.setChartConfig(chartCfg);
    chart.setChartData(data);
    chart.redraw(); // this doesn't work with the wrapper object
} else { // draw chart for the first time

Как мне перерисовать график с новыми данными?

Answer 1

Предполагая, что диаграмма (componentQualityChart) является экземпляром Rally.ui.chart.ChartВы можете получить доступ к экземпляру HighCharts следующим образом:

var highcharts = chart.down('highchart').chart;

// Now you have access to the normal highcharts interface, so
// you could change the xAxis
highcharts.xAxis[0].setCategories([...], true);

// Or you could change the series data
highcharts.series[0].data.push({ ... });  //Add a new data point

// Or pretty much anything else highcharts lets you do

Answer 2

Использование _unmask() удаляет наложенную маску "Загрузка.."

if (this.down('#myChart')) {
    this.remove('myChart');
}
 this.add(
                    {
                        xtype: 'rallychart',
                        height: 400,
                        itemId: 'myChart',
                        chartConfig: {
                            //....
                        },            
                        chartData: {
                            categories: scheduleStateGroups, 
                            series: [ 
                                {   
                                    //...
                                }
                            ]
                        }
                    }
                );
        this.down('#myChart')._unmask();