Question

如何在单独的变量中分隔标签和总价值然后返回到视图，标签值显示在标签中，总价值显示总计我显示的代码可以任何人告诉我该怎么做。这是我的控制器和脚本，我正在使用chart.js，我想在标签变量和总变量中的总值中选择值标签值，这里是数组合，表示组合中的标签和总值数组。

 <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

您可以创建一个包含标签和数据的ViewModel类：

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。

在视图上你可以有类似的东西：

@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>

如何使用数组分隔标签和总值并传递给视图

1 个答案: