Question

我试图将两个Rally图表放在容器中以控制其布局。不幸的是，由于某些原因，它不起作用。 Plase查看代码（为方便起见提供完整的HTML）：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>

<script type="text/javascript">
    Rally.onReady(function () {
            Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',

_atTheStartAddedChart: null,
_stateChart: null,

launch: function () {
    //Write app code here
    var me = this;

    me._createAtTheStartAddedChart();
    me._createStateChart();

    console.log('chart 1', me._atTheStartAddedChart);
    console.log('chart 2', me._stateChart);

    me._chartContainer = Ext.create('Ext.Container', {
        itemId: 'cont',
        renderTo: Ext.getBody(),
        layout: {
            type: 'hbox',
            align: 'middle'
        }
        ,
        items: [
            me._atTheStartAddedChart,
            me._stateChart
        ]
    });
    me.add(me._chartContainer);
},

_createAtTheStartAddedChart: function () {
    var me = this;

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

    var chart = me._createChart(series);
    me._atTheStartAddedChart = chart;
},

_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'
                }
            ]
        }
    ];

    var chart = me._createChart(series);
    me._stateChart = chart;
},

_createChart: function (series) {
    var chart = Ext.create('Rally.ui.chart.Chart', {
        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
        }
    });

    return chart;
}
});


        Rally.launchApp('CustomApp', {
            name:"Random App Name42726",
            parentRepos:""
        });

    });
</script>
</head>
<body>
</body>
</html>

图表已成功创建，但根本不会显示。没有与其显示有关的错误，所以我甚至不知道在哪里寻找问题。也许有人知道如何横向放置图表（我不需要Ext.Container在这里，任何其他容器也会没问题）？

还有一个错误Uncaught Highcharts错误＃16：www.highcharts.com/errors/16（已经在页面中定义了Highcharts），不知道它的原因是什么。

Answer 1

我显示了这些图表 - 您可能会看到完整的应用和屏幕截图，显示this repo中的两个饼图。

这是js文件。主要的变化是代码中图表被添加到容器的位置。我把它移到_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
            }
        });
    }
});

将Rally.ui.chart.Chart图表放在容器中

1 个答案: