Question

Partial View＆＃34; PiePartial.cshtml＆＃34;：

@model IEnumerable<QLCLDA.Models.Chart.ChartValue>

<script type="text/javascript">
    var chart;
    var legend;

    AmCharts.ready(function () {
        // PIE CHART
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = @Html.Raw(Json.Encode(Model));
        chart.titleField = "name";
        chart.valueField = "value";
        chart.outlineColor = "#FFFFFF";
        chart.outlineAlpha = 0.8;
        chart.outlineThickness = 2;

        // WRITE
        chart.write("piediv");
    });
</script>

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>

使用<div id="piediv">调用只显示1个Model IsFailed图表，我认为它们具有相同的id="piediv"是其原因。

我想在Index.cshtml中显示2个饼图，其中包含Model ProjectCount 和 IsFailed

Answer 1

您实际上可以直接在PartialView中更改代码并移动持有者容器：

部分视图＆＃34; PieChart.cshtml＆＃34;：

@model Tuple<string, IEnumerable<QLCLDA.Models.Chart.ChartValue>>
@{
  var controlId = Model.First;
}
<div id="@controlId" style="width: 100%; height: 400px;"></div>

<script type="text/javascript">
    var chart;
    var legend;

    AmCharts.ready(function () {
        // PIE CHART
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = @Html.Raw(Json.Encode(Model.Second));
        chart.titleField = "name";
        chart.valueField = "value";
        chart.outlineColor = "#FFFFFF";
        chart.outlineAlpha = 0.8;
        chart.outlineThickness = 2;

        // WRITE
        chart.write("@controlId");
    });
</script>

Index.cshtml

@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);
}

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

在视图中绘制多个图表

1 个答案: