배열을 사용하여 레이블 및 합계 값을 seprate하고보기로 전달하는 방법

Question

레이블과 합계 값을 별도의 변수로 분리 한 다음보기로 돌아가려면 레이블에 값 표시 및 총 값 표시 합니다. 코드를 표시 할 수 있습니다. 하나는하는 방법을 말해. 여기 내 컨트롤러와 스크립트입니다. chart.js를 사용하고 있습니다. label 변수의 값 라벨 값과 전체 변수의 총 값을 separate하고 싶습니다. 여기서는 배열 결합입니다. 레이블과 총합 배열을 결합한 것입니다.

public class ChartJsViewModel { 
    public List<object> unitdata {get; set;} 
    public List<object> labels {get; set;} 
} 

그래서 같이 사용할 수 :

[HttpPost] 
public JsonResult MemberData() 
{ 

    List<object> unitdata = new List<object>(); 
    List<object> labels = new List<object>(); 

    // Populate the unitdata and labels from your database 
    ..... 

    ChartJsViewModel chartModel = new ChartJsViewModel { 
     unitdata = unitdata, 
     labels = labels 
    }; 

    return Json(chartModel); 
} 

그런 다음 chartModel JSON 직렬화 할 수

<script> 
var myLabels = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.unitdata)); 
var myData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject()); 
    var PieChartData = 
     { 
      labels: myLabels, 
      datasets: [{ 
       label: 'ProductWise Sales Count', 
       backgroundColor: [ 
        "#f990a7", 
        "#aad2ed", 
        "#9966FF", 
        "#99e5e5", 
        "#f7bd83", 
       ], 
       borderWidth: 2, 
       data:myData 
      }] 
     }; 

     window.onload = function() { 
      var ctx1 = document.getElementById("Piecanvas").getContext("2d"); 
      window.myBar = new Chart(ctx1, 
       { 
        type: 'pie', 
        data: PieChartData, 
        options: 
         { 
          title: 
          { 
           display: true, 
           text: "ProductWise Sales Count" 
          }, 
          responsive: true, 
          maintainAspectRatio: true 
         } 
       }); 
     } 
</script> 

public ActionResult Index() 
    { 
     MemberData(); 
     return View(); 
    } 

    [HttpPost] 
    public JsonResult MemberData() 
    { 

     List<object> unitdata = new List<object>(); 
     unitdata.Add(new object[] 
        { 
         "Status", "Total" 
        }); 
     using (SqlConnection con = new SqlConnection(constr)) 
     { 
      using (SqlCommand cmd = new SqlCommand("Sp_testing", con)) 
      { 

       cmd.CommandType = CommandType.StoredProcedure; 
       cmd.Connection = con; 
       con.Open(); 
       using (SqlDataReader mReader = cmd.ExecuteReader()) 
       { 
        while (mReader.Read()) 
        { 
         unitdata.Add(new object[] 
        { 
         mReader["Status"], mReader["Total"] 
        }); 
        } 
       } 
       con.Close(); 
      } 
     } 
     return Json(unitdata); 
    } 

Answer 1

당신은 레이블과 데이터를 모두 포함하는 뷰 모델 클래스를 만들 수 있습니다 보기 페이지에서 보기에

당신은 같은 것을 할 수 있습니다 :보기, viewbag.unitdata에 unitdara와 라벨을 전달하는

@model namespace.folder.ChartJsModelView 

<div> 
Chart JS Components 
</div> 

<script> 
var myLabels = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@Model.labels)); 
var myData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@Model.unitdata)); 

/* Other chartjs script functions */ 
...... 
</script>