Question

我已经尝试过将图表的大小缩小，但它仍占用全屏。我也尝试将它放在一个div中并设置高度和宽度。

<div style="height=400; width=600;">
    @{
        var MyChart = new Chart(600, 400)
            .AddTitle("File Count")
            .AddSeries(
                name: "File Count",
                chartType: "bar",
                xValue: descList.ToArray(),
                yValues: intList.ToArray());
        MyChart.Write();
    }
</div>

`

Answer 1

我会通过创建一个CSS类来设置由Chart.Write（）方法生成的子标记的宽度和高度。

<强> CSS

.chart-container img {
    width: 600px;
    height: 400px;
}

<强> HTML

<div class="chart-container">
    @{
        var MyChart = new Chart(600, 400)
            .AddTitle("File Count")
            .AddSeries(
                name: "File Count",
                chartType: "bar",
                xValue: descList.ToArray(),
                yValues: intList.ToArray());
        MyChart.Write();
    }
</div>

Answer 2

我知道这个问题真的很老了，但我自己也在努力解决同样的问题。

对于像我这样的其他新手，这可能是值得的。

MyChart.Write（）基本上会生成一个图像并将其返回给浏览器周围的剃刀代码。

您还可以看到浏览器的标题显示类似＆＃34;图像（400x600）＆＃34;。浏览器正在显示图像，而不是网页。

为了将呈现的图表显示为网页的一部分，您必须构建您的网页并放置一个<img>标记，其中图像的源是一个单独的视图，如rendermage.cshtml，您放置你问的代码。

我从这里得到了我的信息：Displaying Charts Inside a Web Page

在Razor for Asp.Net每当我创建一个图表时，它会自动全屏显示并占据整个视图

2 个答案: