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'))

另外，我认为你不能像你一样将新的Date（）抛入属性。

请参阅fiddle

Answer 2

问题在于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/

Answer 3

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

new Date("2015/01/30")

我有更少的无效字符消息，但它仍然无效。为了使它进入输入字段，我不得不在字段和字符串值周围放置单引号。然后，为了正确解析，我必须执行以下操作：

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

其中单引号（g ==全局包含在字符串中）并用双引号替换它们。这可以在Updated Fiddle中看到。 ＆lt; - 解决方案

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

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

3 个答案: