Javascript 将Rally.ui.chart.chart图表放入容器中

我试图把两张反弹图放在一个容器中，以控制它们的布局。不幸的是，由于某些原因，它不起作用。 请参见代码（为方便起见提供的完整HTML）：

Rally.onReady（函数（）{
Ext.define（'CustomApp'{
扩展：“Rally.app.app”，
组件CLS:“应用程序”，
_ATTHESTARTADDECHART:null，
_状态图：空，
启动：函数（）{
//在此处编写应用程序代码
var me=这个；
我。_createAtTheStartAddedChart（）；
我。_createStateChart（）；
console.log（'图表1'，me._atthestartedchart）；
console.log（'图表2'，me.\u状态图）；
me.\u chartContainer=Ext.create（'Ext.Container'{
itemId:'继续'，
renderTo:Ext.getBody（），
布局：{
类型：“hbox”，
对齐：“中间”
}
,
项目：[
我._attestart补充道，
我._状态图
]
});
me.add（me.\u chartContainer）；
},
_CreateAttheStartAddChart:函数（）{
var me=这个；
变量系列=[
{
键入“pie”，
名称：“功能”，
数据：[
{
名称：“开始时”，
y:20，
颜色：'#0CDBE8'
},
{
名称：“发布期间添加”，
y:30，
颜色：“#FFE11A”
}
]
}
];
var chart=me.\u createChart（系列）；
me._atthestartedchart=图表；
},
_createStateChart:函数（）{
var me=这个；
变量系列=[
{
键入“pie”，
名称：“功能”，
数据：[
{
名称：“未及时完成”，
y:10，
颜色：“#FFE11A”
},
{
名称：“及时完成”，
y:15，
颜色：“#98C000”
},
{
名称：“已从发布中删除”，
y:20，
颜色：“#EA2E49”
},
{
名称：'完全删除'，
y:5，
颜色：“#3D4C53”
}
]
}
];
var chart=me.\u createChart（系列）；
me._stateChart=图表；
},
_createChart:函数（系列）{
var chart=Ext.create（'Rally.ui.chart.chart'{
图表配置：{
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“发布功能”
},
工具提示：{
pointFormat:“{series.name}：{point.y}”
},
打印选项：{
馅饼：{
allowPointSelect:false，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
}
},
图表数据：{
系列：系列
}
});
收益表；
}
});
Rally.launchApp（'CustomApp'{
名称：“随机应用程序名称42726”，
家长报告：“
});
});

图表已成功创建，但根本不显示。没有与它们的显示相关的错误，所以我甚至不知道从哪里查找问题。 也许有人知道如何水平放置图表（我这里不需要Ext.Container，其他任何容器都可以）

---

还有一个错误未捕获Highcharts error#16:www.Highcharts.com/errors/16（页面中已经定义了Highcharts），不确定原因是什么。

我让这些图表显示出来-您可以在中看到完整的应用程序和显示两个饼图的屏幕截图

这是js文件。主要的变化是在代码中将图表添加到容器的位置。我将其移动到

\u createChart

函数。Highchart错误16不会阻止图表加载。您最终可能会创建两个容器，并将图表添加到单独的容器中，但这是最简单的方式：

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    _atTheStartAddedChart: null,
    _stateChart: null,
    items: [
        {
            xtype: 'container',
            itemId: 'mychart',
            columnWidth: 1
        }
    ],
    launch: function() {

        this._createAtTheStartAddedChart();
        this._createStateChart();
    },

    _createAtTheStartAddedChart: function () {

    var series = [
        {
            type: 'pie',
            name: 'Features',
            data: [
                {
                    name: 'At the Start',
                    y: 20,
                    color: '#0CDBE8'
                },
                {
                    name: 'Added During Release',
                    y: 30,
                    color: '#FFE11A'
                }
            ]
        }
    ];
    this._createChart(series);
},

    _createStateChart: function () {
        var me = this;

        var series = [
            {
                type: 'pie',
                name: 'Features',
                data: [
                    {
                        name: 'Not Completed in Time',
                        y: 10,
                        color: '#FFE11A'
                    },
                    {
                        name: 'Completed in Time',
                        y: 15,
                        color: '#98C000'
                    },
                    {
                        name: 'Removed from Release',
                        y: 20,
                        color: '#EA2E49'
                    },
                    {
                        name: 'Completely Removed',
                        y: 5,
                        color: '#3D4C53'
                    }
                ]
            }
        ];
        this._createChart(series);
},

    _createChart: function (series) {
        var chartDiv = this.down("#mychart");
        chartDiv.add({
            xtype: 'rallychart',
            chartConfig: {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Release Features'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                }
            },
            chartData: {
                series: series
            }
        });
    }
});

Ext.define（'CustomApp'{
扩展：“Rally.app.app”，
组件CLS:“应用程序”，
_ATTHESTARTADDECHART:null，
_状态图：空，
项目：[
{
xtype:'容器'，
itemId:'我的图表'，
列宽：1
}
],
启动：函数（）{
这是。_createAttheStartAddChart（）；
这是。_createStateChart（）；
},
_CreateAttheStartAddChart:函数（）{
变量系列=[
{
键入“pie”，
名称：“功能”，
数据：[
{
名称：“开始时”，
y:20，
颜色：'#0CDBE8'
},
{
名称：“发布期间添加”，
y:30，
颜色：“#FFE11A”
}
]
}
];
这是"创造图表(系列)",；
},
_createStateChart:函数（）{
var me=这个；
变量系列=[
{
键入“pie”，
名称：“功能”，
数据：[
{
名称：“未及时完成”，
y:10，
颜色：“#FFE11A”
},
{
名称：“及时完成”，
y:15，
颜色：“#98C000”
},
{
名称：“已从发布中删除”，
y:20，
颜色：“#EA2E49”
},
{
名称：'完全删除'，
Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    _atTheStartAddedChart: null,
    _stateChart: null,
    items: [
        {
            xtype: 'container',
            itemId: 'mychart',
            columnWidth: 1
        }
    ],
    launch: function() {

        this._createAtTheStartAddedChart();
        this._createStateChart();
    },

    _createAtTheStartAddedChart: function () {

    var series = [
        {
            type: 'pie',
            name: 'Features',
            data: [
                {
                    name: 'At the Start',
                    y: 20,
                    color: '#0CDBE8'
                },
                {
                    name: 'Added During Release',
                    y: 30,
                    color: '#FFE11A'
                }
            ]
        }
    ];
    this._createChart(series);
},

    _createStateChart: function () {
        var me = this;

        var series = [
            {
                type: 'pie',
                name: 'Features',
                data: [
                    {
                        name: 'Not Completed in Time',
                        y: 10,
                        color: '#FFE11A'
                    },
                    {
                        name: 'Completed in Time',
                        y: 15,
                        color: '#98C000'
                    },
                    {
                        name: 'Removed from Release',
                        y: 20,
                        color: '#EA2E49'
                    },
                    {
                        name: 'Completely Removed',
                        y: 5,
                        color: '#3D4C53'
                    }
                ]
            }
        ];
        this._createChart(series);
},

    _createChart: function (series) {
        var chartDiv = this.down("#mychart");
        chartDiv.add({
            xtype: 'rallychart',
            chartConfig: {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Release Features'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                }
            },
            chartData: {
                series: series
            }
        });
    }
});