Build organization chart image in Vue Diagram component
17 Mar 202314 minutes to read
In the organizationchart, bind the text inside the rectangle node annotation. In this section, you can see how to build the organization chart with Image nodes.
Step1
The following code snippet are used to bind the data source to dataSourceSettings and how to map the image source from the data source.
// Data source
export let data = [{
Id: "parent",
Role: "Project Management",
ImageUrl: "./diagram/images/employees/image30.png"
},
{
Id: 1,
Role: "R&D Team",
Team: "parent",
ImageUrl: "./diagram/images/employees/image2.png"
}
];Step2
Image nodes can be created on the organization chart using the doBinding method. In this method, you can customize the nodes properties.
In the following code sample, the image node and annotation properties can be customized. Refer to the image node for creating the image node.
export default {
data() {
return{
dataSourceSettings: {
doBinding: (node, data) => {
node.shape = {
// sets the type of the shape as image
type: 'Image',
// image url for the image node
source: node.data.ImageUrl,
// sets the alignment the image
align:'XMinYMin',
};
node.annotations = [{
// sets the annotation content for the Node
content:node.data.Name,
// sets postions of the annotation
offset:{x:0.82, y:0.9}}];
}
}
}
// ...
// ...
}
}<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults' :snapSettings='snapSettings':getConnectorDefaults='getConnectorDefaults' :layout='layout' :dataSourceSettings='dataSourceSettings' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,Diagram, HierarchicalTree, DataBinding,DiagramTools,NodeModel } from '@syncfusion/ej2-vue-diagrams';
import { DataManager,Query } from "@syncfusion/ej2-data";
Diagram.Inject(DataBinding, HierarchicalTree);
Vue.use(DiagramPlugin);
export let data = [{
'Id': 'parent', 'Name': 'Maria Anders', 'Designation': 'Managing Director',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'true', 'RatingColor': '#C34444'
},
{
'Id': 1, 'Name': 'Ana Trujillo', 'Designation': 'Project Manager',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 'parent'
},
{
'Id': 2, 'Name': 'Anto Moreno', 'Designation': 'Project Lead',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 3, 'Name': 'Thomas Hardy', 'Designation': 'Senior S/w Engg',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'false',
'RatingColor': '#68C2DE', 'ReportingPerson': 2
},
{
'Id': 4, 'Name': 'Christina kaff', 'Designation': 'S/w Engg',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 3
},
{
'Id': 5, 'Name': 'Hanna Moos', 'Designation': 'Project Trainee',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'true',
'RatingColor': '#D46E89', 'ReportingPerson': 4
},
{
'Id': 6, 'Name': 'Peter Citeaux', 'Designation': 'Project Trainee',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'true',
'RatingColor': '#68C2DE', 'ReportingPerson': 4
},
{
'Id': 7, 'Name': 'Martín Kloss', 'Designation': 'Senior S/w Engg',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'false',
'RatingColor': '#93B85A', 'ReportingPerson': 1
},
{
'Id': 9, 'Name': 'Elizabeth Mary', 'Designation': 'Project Trainee',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'None',
'RatingColor': '#93B85A', 'ReportingPerson': 8
},
{
'Id': 10, 'Name': 'Victoria Ash', 'Designation': 'Project Trainee',
'ImageUrl': 'https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/businessman.png', 'IsExpand': 'None',
'RatingColor': '#D46E89', 'ReportingPerson': 8
}
];
let items = new DataManager(data, new Query().take(7));
export default {
name: 'app',
data() {
return {
width: "100%",
height: "590px",
//Uses layout to auto-arrange nodes on the Diagram page
snapSettings: {
constraints: 0
}, //Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'OrganizationalChart',
getLayoutInfo: (node, options) => {
if (!options.hasSubTree) {
options.type = 'Center';
options.orientation = 'Horizontal';
}
}
}, //Configures data source for Diagram
dataSourceSettings: {
id: 'Id',
parentId: 'ReportingPerson',
dataManager: items
},
//Sets the default properties for nodes and connectors
getNodeDefaults: (obj, diagram) => {
obj.width = 150;
obj.height = 50;
obj.style.fill = '#6BA5D7';
obj.shape = {
type: 'Image', source: (obj.data).ImageUrl,align:'XMinYMin',
};
obj.annotations = [{content:(obj.data).Name, offset:{x:0.7, y:0.5}}];
return obj;
},
getConnectorDefaults: (connector, diagram) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.targetDecorator.shape = 'None';
connector.targetDecorator.shape = 'None';
connector.type = 'Orthogonal';
return connector;
}
}
},
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>