Question

我正在尝试使用'rallychart'组件向我的应用添加HighCharts图表。我想要重新创建的图表可以在这里看到：

它使用'line'和'columnrange'元素的组合来实现所需的效果。通过设置如下配置，我可以使用'rallychart'单独渲染两种类型的图表：

chartConfig:
    chart : {
        type : 'line' //Or 'columnrange'
    }
}

如果我没有指定此设置，而是在系列对象中指定图表类型，就像我在上一个示例中那样，我在尝试渲染图表时收到以下错误消息：

enter image description here

我不确定我的配置是否有错误，或者这可能是组件本身的问题。

Answer 1

我提交了一个错误。如果系列中设置了columnrange，则不使用图表类型组合但仅type: 'columnrange'的简化代码仍会返回相同的错误。如果已设置

，则有效

chartConfig: {

       chart:{type: 'columnrange'}

}

但是当我们想要一个混合型图表时，这没有帮助。当我测试该系列中的其他类型时，例如column，它有效，这似乎表明此问题不会影响所有类型。

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',

    launch: function() {
       this._makeChart();
    },

    _makeChart:function(){
    var _series = [

                 {
            type : 'columnrange',
            name : 'Range',
            data : [
                    [-9.7, 9.4],
                    [-8.7, 6.5],
                    [-3.5, 9.4],
                    [-1.4, 19.9],
                    [0.0, 22.6],
                    [2.9, 29.5],
                    [9.2, 30.7],
                    [7.3, 26.5],
                    [4.4, 18.0],
                    [-3.1, 11.4],
                    [-5.2, 10.4],
                    [-13.5, 9.8]
            ],
            pointWidth: 4
           }
           ];

        this.add(
        {
            xtype: 'rallychart',
            viewConfig: {
                loadMask: false
            },
            id: 'chart',
            chartConfig: {
        //chart:{type: 'columnrange'}
        chart:{}
            },

            chartData: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                series: _series
            }

        });

    }
});

还有另一个细节。请注意，我在categories内设置chartData，而不是xAxis。请参阅source chartConfig.xAxis.categories被覆盖：

chartConfig.xAxis.categories = this.chartData.categories;

如果未在chartData中定义，但在chartConfig.xAxis中定义，则xAxis中的值将不起作用。

带有'rallychart'组件的混合系列类型

1 个答案: