Asp.net mvc 在视图中绘制多个图表

部分视图“pieportial.cshtml”：

@model IEnumerable
var图；
变量图例；
AmCharts.ready（函数（）{
//饼图
chart=新的AmCharts.AmPieChart（）；
chart.dataProvider=@Html.Raw（Json.Encode（Model））；
chart.titleField=“name”；
chart.valueField=“value”；
chart.outlineColor=“#FFFFFF”；
chart.outlineAlpha=0.8；
chart.OutlineHickness=2；
//写
图表。书写（“piediv”）；
});

Index.cshtml

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", Model.ProjectCount);
    Html.RenderPartial("PiePartial", Model.IsFailed);
}

<div id="piediv" style="width: 100%; height: 400px;"></div>

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";

    var ProjectCountData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount", Model.ProjectCount);

    var IsFailedData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount",IsFailed);
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", ProjectCountData);
    Html.RenderPartial("PiePartial", IsFailedData);
}

@model QLCLDA.Models.Chart.ChartDraw
@{
ViewBag.Title=“Index”；
}
@{
RenderPartial（“pieportial”，Model.ProjectCount）；
RenderPartial（“pieportial”，Model.IsFailed）；
}

用

调用仅显示1个模型图表失败，我认为他们有相同的

id=“piediv”

是原因

---

我想显示两个饼图，其中包含Model ProjectCount和IsFailed inside Index。cshtml

您可以实际更改代码并直接在

PartialView

中移动支架容器：

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", Model.ProjectCount);
    Html.RenderPartial("PiePartial", Model.IsFailed);
}

<div id="piediv" style="width: 100%; height: 400px;"></div>

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";

    var ProjectCountData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount", Model.ProjectCount);

    var IsFailedData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount",IsFailed);
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", ProjectCountData);
    Html.RenderPartial("PiePartial", IsFailedData);
}

部分视图“PieChart.cshtml”：

@模型元组
@{
var controlId=模型。首先；
}
var图；
变量图例；
AmCharts.ready（函数（）{
//饼图
chart=新的AmCharts.AmPieChart（）；
chart.dataProvider=@Html.Raw（Json.Encode（Model.Second））；
chart.titleField=“name”；
chart.valueField=“value”；
chart.outlineColor=“#FFFFFF”；
chart.outlineAlpha=0.8；
chart.OutlineHickness=2；
//写
图表。写入（“@controlId”）；
});

Index.cshtml

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", Model.ProjectCount);
    Html.RenderPartial("PiePartial", Model.IsFailed);
}

<div id="piediv" style="width: 100%; height: 400px;"></div>

@model QLCLDA.Models.Chart.ChartDraw

@{
    ViewBag.Title = "Index";

    var ProjectCountData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount", Model.ProjectCount);

    var IsFailedData = new Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>("ProjectCount",IsFailed);
}

<script src="~/Scripts/amcharts/amcharts.js"></script>
<script src="~/Scripts/amcharts/pie.js"></script>

@{
    Html.RenderPartial("PiePartial", ProjectCountData);
    Html.RenderPartial("PiePartial", IsFailedData);
}

@model QLCLDA.Models.Chart.ChartDraw
@{
ViewBag.Title=“Index”；
var ProjectCountData=新元组（“ProjectCount”，Model.ProjectCount）；
var IsFailedData=新元组（“ProjectCount”，IsFailed）；
}
@{
Html.RenderPartial（“pieportial”，ProjectCountData）；
Html.RenderPartial（“pieportial”，IsFailedData）；
}

---

在这种情况下，您可以将创建图表的逻辑与实际应用程序逻辑分离，并且可以添加任意数量的图表。

谢谢您的帮助，我解决了这个问题！我写错了部分视图的名称，正确的名称是“pieportial.cshtml”，但没关系，我像你一样创建了一个变量

controlId

，并传递了一个随机字符串：）我很高兴听到你解决了你的问题！但实际上，最好不要发送随机的controlId，而是发送一些正确的值。