剑道图表未在 Twitter Bootstrap 中调整大小

Question

请看这里

调整浏览器大小后，Google 地图和网格的大小会正确调整。 我希望谷歌地图始终占据页面高度的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>

有没有人遇到过这个？

保罗

Answer 1

引用开发人员的话，

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

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

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

我不确定这是否支持百分比高度，只有尝试才能说明问题。如果您想要一个适合窗口的动态页面，则在页面大小更改时，您可能必须以 JS 为单位计算高度。