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

Question

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

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

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

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

JSON.parse
JSON.stringify

无果。

在关联的 fiddle 中，注意：您将收到一个警告弹出窗口，显示 "invalid character" 您可以看到第一个图表是 "inline"我从那里获取结果并将其粘贴到代码中。效果很好。第二张图表是相同的数据，但我将它放入一个变量中只是为了看看我是否可以这样做。最后一个是我想要完成的。我有一个包含 JSON 数据字符串的控件。我想读取该字符串并将其转换为生成第三个图表的可能。

预先感谢您的帮助。

Answer 1

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

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

EDIT 然后在 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/

Answer 2

要正确解析 json，属性应为：

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

那么你只需要调用

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

此外，我认为您不能像现在这样将 new Date() 扔到属性中。

见fiddle

Answer 3

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

new Date("2015/01/30")

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

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

它采用单引号（字符串中的全局 g ==）并将其替换为双引号。正如您在 Updated Fiddle 中看到的那样有效。 <-- 解决方案

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

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

How To Generate a Kendo UI Chart From a String of JSON

json

kendo-ui