如何将此JSON数据绑定到Kendo UI图表？

Question

我在将JSON数据绑定到ASP.Net MVC中的Kendo UI图表时非常困难。 我一直在浏览文档，分解演示，搜索在SO（以及其他地方）上可以找到的所有内容，以尝试找到我做错了什么线索，这可以使我重回正轨，但我一直在努力一堵砖墙。 我开始担心我只是很稠密，哈哈。

到目前为止，这是我正在使用的东西：

JSON数据：

{  
   "responseHeader":{  
      "status":0,
      "QTime":6,
      "params":{  
         "indent":"true",
         "q":"*:*",
         "wt":"json"
      }
   },
   "response":{  
      "numFound":5,
      "start":0,
      "docs":[  
         {  
            "monthAndYear":"Apr 2015",
            "region":"Central Region",
            "projects_finalized":3,
            "_version_":1497873686497067008
         },
         {  
            "monthAndYear":"Apr 2015",
            "region":"Northern Region",
            "projects_finalized"1,
            "_version_":1497873686498115584
         },
         {  
            "monthAndYear":"Apr 2015",
            "region":"Eastern Region",
            "projects_finalized":1,
            "_version_":1497873686498115585
         },
         {  
            "monthAndYear":"Apr 2015",
            "region":"Southern Region",
            "projects_finalized":6,
            "_version_":1497873686498115586
         },
         {  
            "monthAndYear":"Apr 2015",
            "region":"Western Region",
            "projects_finalized":2,
            "_version_":1497873686498115588
         }
      ]
   }
}

这是我的模特：

public class Rootobject
{
    public Responseheader responseHeader { get; set; }
    public Response response { get; set; }
}

public class Responseheader
{
    public int status { get; set; }
    public int QTime { get; set; }
    public Params _params { get; set; }
}

public class Params
{
    public string indent { get; set; }
    public string q { get; set; }
    public string wt { get; set; }
}

public class Response
{
    public int numFound { get; set; }
    public int start { get; set; }
    public Doc[] docs { get; set; }
}

public class Doc
{
    public string monthAndYear { get; set; }
    public string region { get; set; }
    public int projects_finalized { get; set; }
    public long _version_ { get; set; }
}

这是我的观点：

@{
    ViewBag.Title = "Project Chart";
}

<div style="position: relative; left: 0px; top: 2em; width: 1000px; height: 100%; overflow: hidden; display: inline-block;">
@(Html.Kendo().Chart<ProjectChart.Models.ProjectClass>()
    .Name("barProjectsThisMonth")
    .Title("Project Results")
    .Legend(legend => legend
        .Visible(false)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .DataSource(ds => ds.Read(read => read.Action("ProjectClass", "HomeController")))
    .Series(series =>
    {
        series.Bar(model => model.response.docs.projects_finalized).Name("Total Projects Completed")
              .Labels(labels => labels.Background("transparent").Visible(true));
    })
    .CategoryAxis(axis => axis
                .Categories(model => model.response.docs.region)
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .MajorUnit(2)
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= value #")
    )
    .Theme("MaterialBlack")
)
</div>

这是我的控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        return View();
    }

    [HttpPost]
    public ActionResult DataBinding()
    {
        string url = "https://solr.fakeURL.com/json";
        WebClient c = new WebClient();
        var json = c.DownloadString(url);

        return Json(json);
    }
}

为了清楚起见，我无法对JSON的输出进行任何更改。 我必须处理给出的内容。

Answer 1

Kendo图表不仅接受任何JSON数据，而且必须采用正确的格式（通常使用return Json(chartModel); ，这一点至关重要return Json(chartModel); 您不必为此担心太多。

在我看来，这样将图表紧密耦合到数据源（Web服务）也是不好的设计，但这与您当前的问题无关。

无论如何，我会执行以下操作：

在业务/数据访问层中，在其中调用Web服务以获取JSON，将JSON转换为CLR对象。 您可以为此使用Json.Net。

Rootobject result = JsonConvert.DeserializeObject<Rootobject>(jsonString);

转换JSON后，从数据中获取图表需要显示的内容（可能只是projects_finalized ？），然后将其返回到图表中。

像这样：

public class ChartModel
{
    public string region { get; set; }
    public int projects_finalized { get; set; }
}

[HttpPost]
public ActionResult DataBinding()
{
    IEnumerable<ChartModel> result = GetData();
    return Json(result);
}

public IEnumerable<ChartModel> GetData() {
    string url = "https://solr.fakeURL.com/json";
    WebClient c = new WebClient();
    var json = c.DownloadString(url);

    // Do something like this to deserialize the JSON.
    Rootobject result = JsonConvert.DeserializeObject<Rootobject>(jsonString);

    // Here you flatten root object into collection of `ChartModel` objects

    return chartModels;
}

Answer 2

您可以尝试一种更简单的入门方法，即将文档列表传递给视图，然后将其绑定到客户端

首先，将json反序列化为对象，在您的情况下为5个文档

public ActionResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";
    var list = new List<Docs>();
    // deserialize json into list
    return View(list);
}

其次，更改视图，基本上从构造函数传递数据源，然后关闭服务器操作，如下所示。

@model List<Docs>
@(Html.Kendo().Chart<ProjectChart.Models.ProjectClass>(Model)
    .DataSource(d => d.ServerOperation(false))

您可能需要调整视图以使其运行，但是至少您的数据在那里。 祝好运