Question

我想做的事情： 创建一个图表，让它每隔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>

Answer 1

使用MVC返回一个序列化的对象列表并不容易，如果你只返回一个JsonResult，它会为你带来很多繁重的工作：

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

调试ajax调用的success，找出result是否符合您的要求，然后将其传递给图表脚本。

注意：通过使用措辞（例如＆＃39;批次＆＃39;），我建议您删除返回到视图的服务器属性列表。这是创建视图模型的理想选择。这种视图模型将是一种＆＃39; lite＆＃39;完整server对象的版本。它会提高初学者的序列化效率，并且在语义上更有意义。

Answer 2

我在使用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);
            }
        });
});

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

2 个答案: