1

我正在尝试使用“rallychart”组件将 HighCharts 图表添加到我的应用程序中。我要重新创建的图表可以在这里看到：

http://jsfiddle.net/sdWr3/

它使用 'line' 和 'columnrange' 元素的组合来达到预期的效果。通过如下设置配置，我可以使用“rallychart”分别渲染两种类型的图表：

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

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

在此处输入图像描述

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

4

1 回答 1

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
            }

        });

    }
});

还有一个细节。请注意，我设置为categoriesinside chartData，而不是 in xAxis。在被覆盖的源代码中查看：chartConfig.xAxis.categories

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

如果没有在chartData中定义，而是在chartConfig.xAxis中定义，则xAxis中的值将不起作用。

于 2013-10-22T23:33:06.027 回答