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

Question

I've tried making the size of the chart smaller but it still takes up the full screen. I've also tried putting it in a div and setting the height and width that way.`

<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

I would do this by creating a CSS class which sets the width and height of the child tag that gets generated by the Chart.Write() method.

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

I know this question is really old, but I just struggled with the same issue myself.

For other newbies like myself, this might be worth something.

The MyChart.Write() basically produces an image and returns that to your browser regardles of the surrounding razor code.

You can also see the title of your browser shows something like "Image (400x600)". The browser is displaying an image, not a web page.

In order to show the rendered chart as part of a web page, you have to build your web page and place an <img> tag where the source of the image is a separate view like rendermage.cshtml where you place your code from the question.

I got my info from here: Displaying Charts Inside a Web Page