Kendo 图表未在 Twitter 中调整大小 Bootstrap

Question

请参阅here

调整浏览器大小时，Google 地图和网格会正确调整大小。我希望 Google 地图始终占据页面高度的 100%。

我希望网格占 70%，图表占其余部分。

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

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

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

 $(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();
            }

        });

加载 window 时也是如此

 $(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 class 的高度更改为不同的百分比，但没有任何改变图表的高度

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

<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

引用the developers,

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

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

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

我不确定这是否支持百分比高度，只有尝试才能知道。如果您想要一个适合 window.

的动态页面，您可能必须在页面大小发生变化时计算 JS 中的高度

Kendo 图表未在 Twitter 中调整大小 Bootstrap

Kendo chart not resizing within Twitter Bootstrap

twitter-bootstrap-3

kendo-dataviz