Twitter bootstrap 3 剑道图未在Twitter引导中调整大小

请看

调整浏览器大小时，谷歌地图和网格的大小将正确调整。我希望谷歌地图总是占据100%的页面高度

我希望网格占70%，图表占剩下的

但是，图表没有垂直调整大小。好像某个地方有一个硬编码的高度

这与其他人遇到的图表根本不调整大小的问题不同，因为如果浏览器越来越宽，图表会水平调整大小

我在加载窗口和调整窗口大小时调用下面的代码

 $(window).resize(function() {
            resizeGrid();

            var chart = $("#kendoChart").data("kendoChart");
            //to check the chart exist or not if exist then redraw it..
            if (chart) {
                chart.redraw();
            }

        });

在加载窗口时也是如此

 $(document).ready(function() { 
            

            var chart = $("#kendoChart").data("kendoChart");
            //to check the chart exist or not if exist then redraw it..
            if (chart) {
                chart.redraw();
            }
}

我已经尝试将相关CSS类的高度更改为不同的百分比，但没有任何更改图表的高度

从下面的标记可以看出，我这里没有硬编码的高度

<div id="chartContainer" class="chartContainer" >
                @(Html.Kendo().Chart<IMeterProfileData>()
                      .Name("kendoChart")
                      .PlotArea(plotArea =>
                          plotArea.Margin(0)
                      )
                      .Legend(legend => legend
                          .Visible(false)
                      )
                      .AutoBind(false)
                      .Series(series => { series.Column(model => model.Consumption, categoryExpression: model => model.PeriodDateTime).Name("Consumption"); })
                      .CategoryAxis(axis => axis
                          .Date()
                          .BaseUnit(ChartAxisBaseUnit.Minutes).BaseUnitStep(30)
                          .Labels(label => label.Step(48).Rotation(-90).Format("dd/MM/yyyy"))
                          .Axis.MajorGridLines.Visible = false
                      )
                      .ValueAxis(axis => axis.Numeric()
                          .Labels(labels => labels.Format("{0:N0}"))
                          .Line(line => line.Visible(false))
                          .Title("Consumption kWh")
                      )
                      .Tooltip(tooltip => tooltip
                          .Visible(true)
                          .Format("{0:N0}")
                      ).ChartArea(area => area.Border(1, "#cdcdcd", ChartDashType.Solid)
                      )    )
            </div>

@（Html.Kendo（）.Chart（））
.名称（“kendoChart”）
.PlotArea（PlotArea=>
绘图区域。页边距（0）
)
.Legend（Legend=>Legend
.可见（假）
)
.AutoBind（假）
.Series（Series=>{Series.Column（model=>model.consumpion，categoryExpression:model=>model.PeriodDateTime）.Name（“Consumption”）；}）
.CategoryAxis（轴=>轴
.日期（
.BaseUnit（ChartAxisBaseUnit.Minutes）.BaseUnitStep（30）
.label（label=>label.Step（48）.旋转（-90）.格式（“dd/MM/yyyy”））
.Axis.MajorGridLines.Visible=false
)
.ValueAxis（axis=>axis.Numeric（）
.Labels（Labels=>Labels.Format（“{0:N0}”））
.Line（Line=>Line.Visible（false））
.标题（“耗电量”）
)
.工具提示（工具提示=>工具提示
.可见（真实）
.Format（“{0:N0}”）
).ChartArea（area=>area.Border（1，“#cdcdcd”，ChartDashType.Solid）
)    )

有人见过这个吗

引用保罗的话

“图表的大小最初可以在配置中设置，也可以通过在父元素上指定大小来设置。例如：

$("#chart").kendoChart({
    chartArea: {
        width: 200,
        height: 200
    },
    ....

如果希望动态更改大小，还应在更改后使用刷新或重画方法重新绘制图表。”

---

我不确定这是否支持百分比高度，只有尝试才能说明。如果你想要一个适合窗口的动态页面，你可能需要在页面大小改变时用JS计算高度。

Inspector Gadget告诉你要找什么：

.k-chart、.k-stockchart{height:400px；}

是在kendo.datawiz.min.css中设置的。我已经更新了我的代码片段，表明我已经在调用刷新方法。正如我在最初的问题中所说的，我不认为这与没有重新绘制的图表有什么关系，因为随着浏览器的调整，图表的宽度已经改变了？我会看看你的其他建议，但我认为这可能是一场噩梦，因为我的控件都托管在Twitter BootstrapIt中。这不是关于图表没有被重新绘制，而是关于图表的高度默认为400，除非指定了另一个值。它不会自动调整到div的高度。Thanks Emil现在可以工作了，它不是完美的，但是更好！似乎当你最大化窗口时，图表底部和页面底部之间的相对间隙会变得更大，这很奇怪。我想我不能把代码放在这里。我已经接受了这个答案，但是我没有办法把我用来帮助别人的代码写出来吗？我不确定回答我自己的问题是否正确，因为我得到了答案。我所做的修复是获取图表所在的div，并将图表的高度设置为容器[0]。clientHeightGlad我可以帮忙，@Paul:）当然，如果您愿意，可以用实际代码回答您自己的问题。