Javascript 构建动态趋势图

大家早上好

我一直在做一个小项目来构建一个动态treant.js树形图。为了实现这一点，我使用JSON方法将代码基于collapsable示例

不幸的是，脚本中的JSON并不完全是完美的JSON，这让我的生活特别困难

我已经编写了一段脚本，将所需的JSON创建为字符串，当我写入窗口并复制到collapsable.js中时，图表绘制得非常完美

这里可以看到一个例子

{chart: {container: "#collapsable-example",animateOnInit: true,node: {collapsable: true},animation: {nodeAnimation: "easeOutBounce",nodeSpeed: 700,connectorsAnimation: "bounce",connectorsSpeed: 700}},nodeStructure: { "id": 1, "parent": 0, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 2, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 4, "parent": 2, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 3, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 5, "parent": 3, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 6, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] }, { "id": 7, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }

我正在努力解决的是，在我构建了一个字符串之后，将它转换为treant.js喜欢的对象

比如说

var chart_config = {chart: {container: "#collapsable-example",animateOnInit: true,node: {collapsable: true},animation: {nodeAnimation: "easeOutBounce",nodeSpeed: 700,connectorsAnimation: "bounce",connectorsSpeed: 700}},nodeStructure: { "id": 1, "parent": 0, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 2, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 4, "parent": 2, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 3, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 5, "parent": 3, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 6, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] }, { "id": 7, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }

当JSON从生成它的代码的结果中复制和粘贴时，它工作得非常好，但是

var tree =  eval({chart: {container: "#collapsable-example",animateOnInit: true,node: {collapsable: true},animation: {nodeAnimation: "easeOutBounce",nodeSpeed: 700,connectorsAnimation: "bounce",connectorsSpeed: 700}},nodeStructure: { "id": 1, "parent": 0, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 2, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 4, "parent": 2, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 3, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [ { "id": 5, "parent": 3, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] }, { "id": 6, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] }, { "id": 7, "parent": 1, "text": { "name": "Tony Obrien", "Title": "Managing Director" }, "children": [] } ] })

chart_config = tree

---

这不管用。我收到一个意外的令牌错误。我尝试过JSON.parse，但也没有用。有人有什么想法吗？

您的意外令牌错误可能来自

eval

调用。注意它。你给它一个js对象，所以第一个{很可能是“意外标记”。尝试删除

eval

包装器，我敢打赌它会起作用。

另外需要注意的是：一般来说

eval

被认为不安全，因为它会带来很多安全问题。如果您想将JSON转换为字符串或从字符串转换为JSON，可以使用

JSON.stringify

和

JSON.parse