使用 JSON 创建包含服务器端对象数据的图表

本文关键字：数据 对象 服务器端 JSON 创建 包含 使用 | 更新日期: 2023-09-27 17:55:45

我想做什么：创建一个图表，并让它每隔 x 毫秒显示一次来自服务器的数据（保存在 C# 对象中）。使用JSON（我以前从未使用过）进行谷歌搜索将是最佳实践。

到目前为止，我拥有的：我有后端 C#（使用 MVC 5）获取正确的数据，许多具有大量属性的对象，有些我想在图表中显示，有些则不想。

我还在我的 Index.cshtml 中开始了一个 JSON 函数，这是我的图形所在的地方（目前使用静态数据设置，它是一个简单的 jQuery 插件）。

问题：不确定如何获取特定的对象属性，先获取 JSON 数据，然后再获取图表数据。

实现这一目标的最佳方法是什么？

法典： 控制器： 

// GET: Graphs
        public ActionResult Index()
        {
            return View();
        }
        public static List<server> GetServer()
        {
            Api api = new Api();
            List<server> sList = api.GetServerStats();
            return sList;
        }

INdex 中的脚本：

<script src="~/Scripts/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var chart = new CanvasJS.Chart("someChart", {
            title: {
                text: "Space left on Server vs Total"
            },
            data: [
            {
                type: "column",
                name: "Totals",
                showInLegend: true,
                dataPoints: [
                { label: "Space", y: 20 }
                ]
            },
           {
               type: "column",
               name: "Used",
               showInLegend: true,
               dataPoints: [
               { label: "Space", y: 10 }
               ]
           }
            ],
            axisY: {
                prefix: "",
                suffix: "GB"
            }
        });
        chart.render();
    }
    $(document).ready(function () {
        window.onload(function () {
            $.ajax({
                type: "POST",
                url: "GraphController/GetServer",
                data: { someParameter: "some value" },// array of values from object or just object
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    // need to push into jQuery function
                }
            });
        });
    });
</script>

使用 JSON 创建包含服务器端对象数据的图表

使用 MVC 返回对象的序列化列表再简单不过了，如果您只返回一个JsonResult，则需要花费大量繁重的工作：

public ActionResult GetServer() {
  var api = new Api();
  var = api.GetServerStats();  
  return Json(sList);
}

调试 ajax 调用的success，以确定result是否是您想要和期望的，然后将其传递给图表脚本。

注意：从您使用的措辞（即"批次"）来看，我建议您减少返回到视图的服务器属性列表。这是创建所谓的视图模型的完美候选项。此视图模型将是完整server对象的一种"精简"版本。它将提高初学者的序列化效率，并且在语义上更有意义。

我在 highcharts 上做同样的事情，这里有一个近似的解决方案：

    public ActionResult GetServer()
    {
        Dictionnary<server> sList = new Dictionnary<string,object>();
        sList.Add("Totals",new{
            type= "column",
            name= "Totals",
            showInLegend= true,
            dataPoints= new List<dynamic>(){
              new{ label= "Space", y= 20}/*,
              new{ label= "label2", y= 30},*/
             }
            });
        sList.Add("Totals",new{
            type= "column",
            name= "Used",
            showInLegend= true,
            dataPoints= new List<dynamic>(){
              new{ label= "Space", y= 10}/*,
              new{ label= "label2", y= 40},*/
             }
            });
       return Json(sList, "text/json", JsonRequestBehavior.AllowGet);
    }

更改window.onload=function(){}

function drawChart(serverData){
  var chart = new CanvasJS.Chart("someChart", {
        title: {
            text: "Space left on Server vs Total"
        },
        data: serverData,
        axisY: {
            prefix: "",
            suffix: "GB"
        }
    });
    chart.render();
}
  $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "GraphController/GetStuff",
            data: { someParameter: "some value" },
            // array of values from object or just object
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (serverData) {
                // need to push into jQuery function
                drawChart(serverData);
            }
        });
});
相关文章：