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

Posted 2023-05-07

【中文标题】如何从 JSON 字符串生成 Kendo UI 图表

【英文标题】：How To Generate a Kendo UI Chart From a String of JSON

【发布时间】：2015-04-01 14:27:21

【问题描述】：

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

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

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

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

JSON.parse
JSON.stringify

无济于事。

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

提前感谢您的帮助。

【参考方案1】：

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

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

那你只需要打电话

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

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

见fiddle

【讨论】：

感谢@JFlox，您的帖子是在输入我的答案时出现的。谢谢你和小提琴。

【参考方案2】：

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

new Date("2015/01/30")

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

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

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

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

【参考方案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/

【讨论】：

@OniBai，感谢您的快速回复。我不确定这是否完全正确。至少我不能让它工作。这是一个更新的link 并将“大部分”参数作为字符串放入，使得第二个图表不会以与顶部图表相同的值呈现。你能让它在小提琴中工作吗？

我已经编辑了您的 JSFiddle，对其进行了简化并表明问题出在 date 字段中以及您应该如何处理（在您所说的 dataSource 中定义 schema date 实际上是 date 类型）在这里查看：jsfiddle.net/OnaBai/9z1w759m/8