Question

我想让joint.js库读取我的JSON并将其显示为图表...

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 200,
    model: graph
});

var graph = new joint.dia.Graph;

jsonstring = '{"employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }';

graph.fromJSON(JSON.parse(jsonstring));

Answer 1

来自joint.dia.Graph的API：

joint.dia.Graph是持有所有细胞（元素和细胞）的模型链接）图。这是一个Backbone model。所有细胞的集合存储在属性单元格中。

因此预期的JSON应采用以下形式：{ cells: [] }。其中cells是元素和链接的数组。每个元素都应具有以下形式：

{ 
    id: <string>, 
    type: '<type of shape>', 
    attrs: { <attrs> }, 
    position: { x: <int>, y: <int> }, 
    angle: <deg>, 
    size: { width: <int>, height: <int> }, 
    z: <int>, 
    ... and some other, maybe custom, data properties 
}

参考：Using Server Data with JointJS

在joint.js中读JSON？

1 个答案: