Question

我使用DevExpress控件创建了一个Spline图表。我希望完整的图表能够灵活地使用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()

Answer 1

这很正常。由于CSS，您正在放大图像，因此您的图像将变得模糊。通常，在ClientSide上使用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中找到如何完成所有这些工作。

使用浏览器窗口大小灵活设置图表内的样条图表大小和图像大小

1 个答案: