繪製多個圖表視圖中的

Question

管窺 「PiePartial.cshtml」：

@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">調用僅僅只顯示模式IsFailed 1點的圖表，我認爲他們有同樣的id="piediv"是它的原因。

我想說明2個餅圖與型號ProjectCount和IsFailed內Index.cshtml

Answer 1

實際上，你可以改變你的代碼，並直接在PartialView移動保持件容器：

管窺「餅圖.cshtml「：

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

在這種情況下，您將創建圖表的邏輯與實際的應用程序邏輯分離開來，您也可以根據需要添加任意數量的圖表。