javascript - Building a Dynamic Treant Chart
问题描述
Good morning all,
I've been working on a small project to build a dynamic treant.js tree chart. To achieve this i have based my code on the collapsable example using the JSON method.
Unfortunately the JSON within the script isnt exactly perfect JSON which is making my life particularly difficult.
I have written a piece of script which creates the required JSON as a string which when I write to the window and copy into the collapsable.js the chart is drawn perfectly.
An example can be seen here;
{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": [] } ] }
what im struggling with is after I've built that string converting it to an object that treant.js likes.
for example
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": [] } ] }
When the JSON is copied and pasted from the result of the code that generated it works absolutley fine but.....
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
This doesnt work. I get an unexpected token error. I have tried JSON.parse to no avail either. Does anyone have any ideas?
解决方案
您的意外令牌错误可能来自eval
通话。请注意,它需要一个表示 js 代码的字符串作为参数。您正在给它一个 js 对象,因此第一个“{”可能是“意外令牌”。尝试移除eval
包装,我敢打赌它有效。
推荐阅读
- php - 即使使用正确的 .env 文件凭据,也会出现“SQLSTATE [HY000] [1045] 用户 'root'@'localhost' 的访问被拒绝(使用密码:YES)”错误
- ajax - “X-XSS-Protection”、“X-XSRF-TOKEN”和其他类似的 HTTP 标头中的第一个“X”是什么意思?
- python - 任何人都知道为什么它只刮了 1 页
- python - Python。要求用户输入文件名
- json - 如何在 Flutter 项目中显示来自 Firebase 的 QueryDocumentSnapshot?(颤振,Firebase,Json,飞镖)
- python - 在 Python 中重新绑定函数名称
- python - 使用 selenium 进行 Web 抓取 - 返回 0 条记录
- flutter - 我正在将颤振用于聊天应用程序,并且在用户区分接收方和发送方时出现错误
- php - Wordpress 如何在索引页面中显示所有帖子并排除粘性帖子
- php - Woocommerce 仅在成功付款后创建订单