改变'rallychart'组件的高度以填充外容器

Question

我的页面上有一个'rallychart'组件，它以动态宽度渲染外部容器，但是高度固定为400px。我尝试使用组件的 setSize 函数，但似乎更改了图表容器大小而不是图表本身。是否有设置让图表默认填充宽度和高度，或者至少是一种方式让我听一个页面调整大小事件并手动更改图表的高度？

谢谢！

Answer 1

要拥有高度大于400像素的'rallychart'组件，请更改 chartConfig - ＆gt;图表 - ＆gt;高度设置以反映所需的高度。

注意：高度将是固定的，因此设置一个容器调整大小的监听器，使用此解决方案将需要触发重新绘制图表。

this.down('#chartContainer').add({
    xtype       : 'rallychart',
    chartConfig : {
        chart : {
            height : 500 //Set chart height here
        }
    }
});

Answer 2

我有一个应用，其中指定了容器的height和width：

  var c2 = Ext.create('Ext.Container', {
        id:'c2',
        border: 5,
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        },
        height: 450,
        width:600
      });    
      this.add(c2);

稍后将图表添加到仅指定了height的容器中：

this.down('#c2').add(
        {
            xtype: 'rallychart',
            id: 'ch',
            height: 200,
            chartConfig: {
                chart:{
                  type: 'scatter',
                  zoomType: 'xy'
        },
  //....

并且图表默认填充宽度和高度：

你的例子有何不同？