如何从 JSON 字符串生成 Kendo UI 图表

Question

我有一些图表，我在我的解决方案的后端生成 JSON。如果我按原样获取结果并执行以下操作：

$("#myDiv").kendoChart(/* my generated JSON pasted right here */);

它工作正常。但这当然不是动态的。我有一个更大的对象，它正在向我返回页面的其他数据，其中一些数据是表示在页面上创建不同图表所需的 JSON 的字符串。

我似乎无法弄清楚如何将 JSON 字符串转换为成功生成图表的实际 JSON 对象。我尝试了多种组合：

JSON.parse
JSON.stringify

无济于事。

在相关联的fiddle 中，注意：您将收到一个警告弹出窗口，提示“无效字符”，您可以看到第一个图表是“内联”，我在其中获取了我返回的结果，只是将其粘贴到代码中。效果很好。第二张图表是相同的数据，但我将它放入一个变量中只是为了看看我是否可以这样做。最后一个是我想要完成的。我有一个保存 JSON 数据字符串的控件。我想读取该字符串并对其进行转换，但可以生成第三个图表。

提前感谢您的帮助。

Answer 1

要正确解析 json，属性应该是：

<div id="chartDiv" stringToParse='{"foo":"bar"}'></div>

那你只需要打电话

JSON.parse($("#chartDiv").attr('chartString'))

另外，我不认为你可以像你一样将 new Date() 扔到属性中。

见fiddle

Answer 2

好的，在@OniBai 的一些初步帮助下，当声明所有字段也必须被引用时，我继续沿着这条路走下去。仍然收到无效字符消息。好像我拿出了：

new Date("2015/01/30")

我收到的无效字符消息较少，但仍然无法正常工作。为了将其放入输入字段，我必须在字段和字符串值周围加上单引号。然后，为了正确解析，我必须执行以下操作：

JSON.parse($("#hdnTest").val().replace(/\'/g, "\"");

它采用单引号（字符串中的全局 g ==）并用双引号替换它们。正如您在Updated Fiddle 中看到的那样，这很有效。

幸运的是，对于我的实际项目，我必须通过较旧的 WCF 服务返回字符串。它可以将 \" 放在字符串中，为我节省了 .replace 调用。

Answer 3

问题在于 JSON 字符串解析，因为它在解析字符串 JSON 时不正确，需要引用字段以及值。

您的 {series:[{type:'column',aggregate:'count',field:... 实际上应该看起来像 {'series':[{'type':'column','aggregate':'count','field':...

编辑 然后在date 定义中存在第二个问题，KendoUI 不知道如何解析它，因为您没有说明它是哪种类型。您应该在字符串中定义 date 字段的模型并指定它的类型。

示例：此字符串不起作用：

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}]}}` 

但如果你在 dataSource 定义中包含 "schema":{"model":{"fields":{"date":{"type":"date"}}}} 它会变成：

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}],"schema":{"model":{"fields":{"date":{"type":"date"}}}}}}

然后它就可以正常工作了。

在此处查看 JSFiddle：http://jsfiddle.net/OnaBai/9z1w759m/9/