在 ASP.NET 中嵌入餅圖（Razor 語法）

Question

我對 ASP.NET 相當陌生（很長時間以來一直在 WPF 中進行編碼，但對 ASP 是新手），我正在嘗試創建一個顯示四個餅圖的儀表板應用程序。 我已按照此鏈接上的說明進行操作，但我要么在整個頁面上獲得了圖表，要么獲得了損壞的圖像（好像<img>源無效）

有人可以向我解釋如何實現這種行為嗎？ 我只想在我的頁面上顯示一個簡單的餅圖，就是這樣。

謝謝！ （對不起，如果這是一個重復的帖子，我發現了其他類似的問題，但沒有使用 Razor 語法）

編輯 - 這是我的代碼：

索引.cshtml：

<!DOCTYPE html>
<html>
<head>
    <title>Chart Example</title>
</head>
<body>
    <h1>Chart Example</h1>
    <p>
        The following chart is generated by the <em>ChartView.cshtml</em> file, but is shown
        in this page.
    </p>
    <p><img src="ChartView.cshtml" /> </p>
</body>
</html>

我的 ChartView.cshtml：（與 Index.cshtml 位於同一文件夾中）

@{
    var myChart = new Chart(600, 400)
       .AddTitle("Employees")
       .AddSeries(chartType: "column",
          xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
          yValues: new[] { "2", "6", "4", "5", "3" });

    if (myChart != null)
    {
        myChart.Write();
    }
}

這是我在瀏覽器上得到的：

Answer 1

您不能返回.cshtml文件（除非您對各種內部設置進行了危險的操作 - 不推薦）。

你應該指向一個action 。

測試這個最簡單的方法是直接在瀏覽器中打開src - 在這種情況下是“ChartView.cshtml”，你應該得到一個 404。

您需要向控制器添加一個返回視圖的操作。

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

然后

<img src='@Url.Action("ChartView", "Home")' alt="Chart"/>

您可以通過在瀏覽器中打開來測試：

/Home/ChartView

（假設 ChartView.cshtml 位於“Views/Home”文件夾中）

由於您是 MVC 的新手，請快速解釋一下。 有一個“routeConfig.cs”，它將傳入的 url 路由到控制器（類）上的操作（方法）。 控制器加載視圖 (cshtml) 並應用所有服務器端代碼，然后將呈現的 html 返回給用戶。

您不會直接導航到 cshtml 頁面，而是通過 url 導航到操作。

默認路由配置為您提供網址，例如：

http://[site]/[controller]/[action]

注意 [controller] 不包括“Controller”，所以“HomeController”變成了“/Home/”

此外，按照慣例，如果您沒有在“View()”中指定視圖名稱，那么它將在您的解決方案文件夾“/Views/[controller]/[action].cshml”中查找（以及其他位置，例如 '/ Views/Shared/[action].cshtml'（也可配置，但這些是默認值）。

Answer 2

您可以輕松地在 mvc 中結合http://morrisjs.github.io/morris.js/index.html （剃刀語法）

或者您可以使用圖表助手

http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart

改成：

@{
    var myChart = new Chart(600, 400)
       .AddTitle("Employees")
       .AddSeries("SomeName",chartType: "Pie",
          xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
          yValues: new[] { "2", "6", "4", "5", "3" });

    if (myChart != null)
    {
        myChart.Write();
    }
}

你必須在 iis 或一些開發服務器中吃午飯

在 ASP.NET 中嵌入餅圖（Razor 語法）

問題描述

2 個解決方案

解決方案1
3 已采納 2015-10-21 12:16:11

解決方案2
1 2015-10-21 12:03:19

在 ASP.NET 中嵌入餅圖（Razor 語法）

問題描述

2 個解決方案

解決方案1 3 已采納 2015-10-21 12:16:11

解決方案2 1 2015-10-21 12:03:19

解決方案1
3 已采納 2015-10-21 12:16:11

解決方案2
1 2015-10-21 12:03:19