剑道 UI 图表没有调整大小?

Posted

技术标签:

【中文标题】剑道 UI 图表没有调整大小?【英文标题】:Kendo UI chart not resizing? 【发布时间】:2014-08-01 17:40:33 【问题描述】:

我有一个 Kendo ui 图表,它显示来自动态数据源的柱形图。但有时,图表会打开可用空间大小的一半。当我单击某些链接或更改日期时,它会自行调整大小。知道为什么会导致它吗?

在数据源更改事件中,当它显示此行为时,它将容器 div 的宽度显示为 0。如果需要,我可以提供更多详细信息

我尝试了其中一个答案中给出的刷新方法,但它没有帮助

【问题讨论】:

这个问题请做一个JSfiddel或者一个JSbin。还要确保购物车所在的容器的宽度设置为 100%。 请分享更多信息或创建 jsfiddle 以便我们可以看到...通常 $("#chart").data("kendoChart").redraw() 工作正常,但分享您的代码.. 【参考方案1】:

当您在动画窗口中打开图表时,通常会发生这种情况。

我的建议是在您确定所有内容都已加载并完全打开时重新绘制图表。

$("#myChart").data("kendoChart").redraw();

如果您没有禁用动画,您可能希望在此之前执行此操作并在之后重新启用它们。

$("#myChart").data("kendoChart").options.transitions = false;

【讨论】:

【参考方案2】:

当您在控制器中获得所有必要的数据后,您可以调用 javascript 回调函数,在该函数中您可以将转换设置为 false,然后重绘图表并将转换设置为 true,您也可以默认隐藏图表并使其在 Javascript 回调函数中可见

【讨论】:

【参考方案3】:

试试这个

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

chart.redraw();

谢谢

【讨论】:

【参考方案4】:

这是我用于图表的:

if($("#areaChart").data("kendoChart")) 
    $("#areaChart svg").width(Number($('.k-content').width()));
    $("#areaChart svg").height(Number($('.k-content').height()));

    $("#areaChart").data("kendoChart").refresh();

取自here

您检查过resize() 方法吗?

【讨论】:

您不想使用 .refresh() 方法,因为它会再次调用图表的读取传输然后重绘。 .redraw() 只会重新显示图表数据源中的当前数据。【参考方案5】:

我在调用 CreateChart() 函数后添加了一个小延迟来修复它,如下所示:

CreateChart(this.id, this.id + " this week", "week", null);
    sleep(1000);

现在可以正常使用了

【讨论】:

【参考方案6】:

$("#divSensingData").kendoChart( 图表区域: 宽度:900, 身高:500 ,

【讨论】:

以上是关于剑道 UI 图表没有调整大小?的主要内容,如果未能解决你的问题,请参考以下文章

剑道网格调整大小列不显示其标题单元格的调整大小句柄

禁用调整一列剑道网格的大小

设置剑道 ui 下拉列表宽度

在窗口调整大小时动态调整画布大小

echarts图表的大小调整的解决方案

vbscript [在PowerPoint中调整图表大小]另一个在PowerPoint #PowerPoint中调整图表大小的示例