Javascript 设置样条曲线图表大小和图表内的图像大小可根据浏览器窗口大小灵活调整

我已经使用DevExpress控件创建了样条曲线图。我希望使用JS和JQuery使整个图表变得灵活。问题是，如果我使用JQuery和css设置图表的大小，就像使用下面的代码一样，图像会变得模糊

$('#myChart_IMG').css('height', $(window).height()).css('width', $(window).width());

如果我使用devexpress代码设置图表大小以调整大小，那么它将变得不灵活。就像下面的代码

settings.Width = 1366;
settings.Height = 763; 

解决办法是什么？下面是我的完整代码

<style type="text/css">
    body, html {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
</style>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#myChart_IMG').css('height', $(window).height()).css('width', $(window).width());
    })
</script>
@Html.DevExpress().Chart(settings =>
{
    settings.Name = "myChart";
    settings.Width = 1366;
    settings.Height = 763;
    Series chartSeries1 = new Series("My Data", DevExpress.XtraCharts.ViewType.Spline);
    chartSeries1.ArgumentDataMember = "X";
    chartSeries1.ValueDataMembers[0] = "Y";
    Series chartSeries2 = new Series("My Chart", DevExpress.XtraCharts.ViewType.Spline);
    chartSeries2.ArgumentDataMember = "X";
    chartSeries2.ValueDataMembers[0] = "Z";
    settings.Series.Add(chartSeries2);
    settings.Series.Add(chartSeries1);
}).Bind(Model).GetHtml()

正文，html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
$（文档）.ready（函数（）{
$（'#myChart_IMG'）.css（'height'，$（window.height（））.css（'width'，$（window.width（））；
})
@Html.DevExpress（）图表（设置=>
{
settings.Name=“myChart”；
设置。宽度=1366；
设置。高度=763；
Series chartSeries1=新系列（“我的数据”，DevExpress.XtraCharts.ViewType.Spline）；
chartSeries1.ArgumentDataMember=“X”；
chartSeries1.ValueDataMembers[0]=“Y”；
Series chartSeries2=新系列（“我的图表”，DevExpress.XtraCharts.ViewType.Spline）；
chartSeries2.ArgumentDataMember=“X”；
chartSeries2.ValueDataMembers[0]=“Z”；
settings.Series.Add（chartSeries2）；
设置.系列.添加（图表系列1）；
}).Bind（Model）.GetHtml（）

这是正常的。由于CSS，您正在放大图像，因此图像将变得模糊。通常，使用客户端上的

chart.SetWidth

和

chart.SetHeight

可以调整图表的大小。不幸的是，DevExpress无法在不向服务器发送回调的情况下执行此操作，因为这是生成映像的地方。因此，如果要在加载文档时使图表灵活地适应浏览器窗口的大小，必须对图表执行回调，并在服务器端调整图表的大小

你说你正在使用ASP.NET MVC，但不幸的是，我对ASP.NET WebForms只有一些经验。尽管如此，我非常确定该解决方案的想法可以在MVC中轻松实现：

• 在视图中添加两个隐藏字段，一个包含窗口宽度，另一个包含高度

• 加载文档后，根据窗口的维度设置隐藏字段值，并在图表上执行回调：

  $(document).ready(function () {
      $('#hiddenFieldWidth').val($(window).width());
      $('#hiddenFieldHeight').val($(window).height());
      myChart.PerformCallback();
  })
  

• 最后，由于隐藏的字段值，在适当的控制器操作中更改图表的大小

---

我希望您能够找到如何在ASP.NET MVC中完成所有这些操作。

您使用的是ASP.NET MVC吗？因为我有一个解决方案给你们，只是在ASP.NET网络表单中。@BishopBarber，是的，我使用的是Mvc。