Javascript 在最小化浏览器窗口的同时重新调整剑道图的大小？

在我们的团队项目中，我们在这里使用KendoUI控件，同时最小化窗口图表大小，而不是减小。如何在最大化/最小化浏览器窗口的同时增大/减小图表大小。？

试试这个

$(window).resize(function () {
     $("#chart svg").width(Number($('.k-content').width()));
     $("#chart svg").height(Number($('.k-content').height()));
     $("#chart").data("kendoChart").refresh();
});

---

您可以附加到窗口的“调整大小”事件，当它更改时，请重置图表上的“宽度”选项

window.onresize = function () {
    var newWidth = window.innerWidth * .9 // 90% of screen width

    var chart = $("#chart").data("kendoChart"); // get chart widget
    chart.options.chartArea.width = newWidth; // set new width
    chart.redraw(); // redraw the chart
};

试试这个对我有用：

//图表数据源
var exampleData=[
{“FromDept”：“ACT”，“ToDept”：“NSW”，“年份”：2010，“总计”：101}，
{“FromDept”：“ACT”，“ToDept”：“NSW”，“年份”：2011，“总计”：1001}，
{“FromDept”：“ACT”，“ToDept”：“NSW”，“年份”：2012，“总计”：501}，
{“FromDept”：“ACT”，“ToDept”：“YNT”，“Year”：2010，“Total”：501}
];
//函数创建图表
函数createChart（）{
//使用exampleData创建剑道图
$（“#图表”）。肯多卡特({
标题：{
正文：“样本”
},
数据源：
{
数据：例如数据，
},
图例：{
位置：“底部”
},
图表区：{
背景：“”
},
系列默认值：{
类型：“行”
},
系列：[{
字段：“总计”，
}],
valueAxis：{
标签：{
格式：“${0}”
}
},
类别：{
字段：“年”
},
工具提示：{
可见：对，
格式：{0}%
}
});
}
//调整窗口大小时调整图表大小
$（窗口）。调整大小（函数（）{
$（“#图表svg”）.width（数字（$（窗口）.width（））；
$（“#图表svg”）.height（数字（$（窗口）.height（））；
$（“#图表”）.data（“kendoChart”）.refresh（）；
});
//文件准备功能
$（文档）.ready（函数（）{
//延迟初始化图表以确保
//初始动画可见
createChart（）；
//最初
$（“#图表svg”）.width（数字（$（窗口）.width（））；
$（“#图表svg”）.height（数字（$（窗口）.height（））；
$（“#图表”）.data（“kendoChart”）.refresh（）；
});

---

还有一点。此外，您可能希望在重画之前禁用动画，并在重画之后启用它

$(window).resize(function () {
    $("#chart").data("kendoChart").options.transitions = false;
    $("#chart").data("kendoChart").refresh();
    $("#chart").data("kendoChart").options.transitions = true;
});

---

嗨..我尝试了这个，但是没有应用任何更改。图表宽度相同，没有应用任何更改。这可能与您的页面有关。下面是在JSFIDLE示例中使用的上述代码：我对我的代码进行了更改，现在调用了

.redraw（）

，而不是

.refresh（）

，因为redraw只进行渲染，而refresh从数据源中重新读取数据，所以会稍微慢一点。您不能在上述代码段中使用百分比。。因为jQuery height（）和width（）将给出像素值，请尝试此操作，它对高度和宽度都有效$（窗口）.resize（函数（）{$（“#图表svg”）.width（数字（$（窗口）.width（））；$（“#图表svg”）.height（数字（$（窗口）.height（））；$（“#图表”）.data（“kendoChart”）.refresh（）；}）；确保页面中包含所有必要的剑道文件。

$(window).resize(function () {
    $("#chart").data("kendoChart").options.transitions = false;
    $("#chart").data("kendoChart").refresh();
    $("#chart").data("kendoChart").options.transitions = true;
});