Question

我正在尝试将某种仪表板放入我的MVC应用程序中，但我无法正确地呈现图表。它似乎只显示字节流而不是图像。

在我的主索引页面上，我有一个按钮，它将回发到控制器以获取数据（本例中的示例数据），然后更新结果部分。

DataPoint.cs

public class DataPoint
{
    public DateTime DateMark { get; set; }
    public int Count { get; set; }
}

Index.cshtml

@model IEnumerable<ChartTest.Models.DataPoint>

@using (Ajax.BeginForm("Generate", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "results" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-danger">
                <div class="panel-heading" style="background-color: #80929C; color: #F6E0C7">
                    <div class="row">

                        <!-- Stuff to get user request information removed -->

                        <div class="col-xs-12 col-sm-1">
                            <div class="row">
                                <div class="col-sm-12" style="vertical-align: bottom">
                                    <input type="submit" value="Generate" class="btn btn-danger pull-right" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-group" style="background-color: transparent; border: none; margin-top: 20px">
            <div class="panel panel-danger" style="background-color: transparent; border: none">
                <div class="panel-heading" style="background-color: #80929C; color: #F6E0C7">

                    <div id="results">

<!-- RESULTS WILL BE PLACED HERE WHEN BUTTON PRESSED -->

                    </div>
                </div>
            </div>
        </div>
    </div>
}

Chart.cshtml

@model IEnumerable<ChartTest.Models.DataPoint>

@{
    var key = new Chart(width: 600, height: 400)
                      .AddTitle("My Data")
                      .AddSeries("Default",
                                 xValue: Model, xField: "DateMark",
                                 yValues: Model, yFields: "Count")
                      .Write();
}

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Generate()
    {
        List<Models.DataPoint> results = new List<Models.DataPoint>();

        //
        // Go get the data here and add to the `results` list
        //

        return PartialView("Chart", results);
    }
}

这里有什么呈现

Answer 1

问题是Chart不是MVC的一部分，而是网页。它们不仅可以轻松合并，因为图表只是将原始图像数据写入您的视图。

This article by Scott Mitchell提供了有关如何将网页元素集成到MVC项目中的指南。

您基本上必须将Chart视图包装在另一个动作中，然后将其插入到仅包含图像标记的视图中

<img src="@Url.Action("GetChart")" />

MVC图表只显示文本流

1 个答案: