dabeng / vue-orgchart Goto Github PK
View Code? Open in Web Editor NEWIt's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
License: MIT License
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
License: MIT License
请问 vue-orgchart 不支持节点收缩/扩展吗?
Hi,
while using your plugin for org chart (which is BTW amazing thanks a lot), I noticed that when you apply the zoom function on the chart you only watch and change the matrix scale property and the translationX and Y stays 0. This leads to constantly zooming to center of the div and not on the current mouse position. Also when zooming is enabled you should set overflow from auto to hidden to prevent collision between scroll and zoom on mouse wheel. Solution is that you track where is the current mouse position on x and y and than subtract the offset of the div x an y, so your mouse position does not move while zooming in. This value is then inserted in last 2 parameters of matrix and the problem should be solved.
Thanks again for amazing plugin and keep up the good work :) .
我看ES6vue版本有展开收起的功能,vue版本没有吗
@dabeng Thanks you very much for your effort to create this library. Do you have a plan to support mobile multi-touch to zoom and also touch slide left/right to pan the chart.
PS. I would like to help enhance in my free time, if you ok with that.
Hi. How can I remove square grid and border from the chart?
I am curently using your vueorgchart in my mlm (binary system) project. However I cannot find solution on how can I customize the positioning of node. E. G left or right. I read the slot-scope on template but not able to implement positioning.
Too much data to show.
Hi @dabeng, I came across with your project by accident. My team and I were looking for a Vue project that could create a tree chart out of the JSON data. I though that your project could help us, but I saw that it leaks some basic features that your jQuery project has (like pan, export and so on). Are you planning to add those features soon? If so, when? If not, do you have any other suggestions for Vue?
Thank you for all the hard work,
Richard
大佬从左到右这么切换?
Currently, vue-orgchart doesn't support RTL.
It would be great if vue-orgchart supports RTL.
how can I add search feature in chart
All i need is just like Jquery version but in vue js. Thanks in advance
how i can set the height of orgchart container ?
.orgchart-container {
position: relative;
display: inline-block;
height: 420px;
width: calc(100% - 24px);
border: 2px dashed #aaa;
border-radius: 5px;
overflow: auto;
text-align: center;
}
Could you provide a complete example, how can I customize nodes. Add image to the node for example. Thanks!
Since the node templates are wider than they are tall, it would present a more compact chart it one were able to have it be drawn horizontally , like the following. (I'm using the Vue component)
= b
a
= c
The underlying OrgChart object (looking at your ES6 examples) seems to support some basic ability to drag nodes to reorder the org chart, but I don't see how to do that in the Vue version. is this supported?
Hello @dabeng, thank you very much for the awesome project.
I want to customize the contents only for the children's nodes, not the parent node.
I got great help from here. But the problem with that solution is if I add some custom fields, they appear in all nodes, including the parent node.
However, I just want to add some fields, for example, a submit button to only children's nodes.
Is there any way how can I achieve this?
From the image below, you can see that I have an additional attribute "Submit" (shown in the red box).
I achieved this by adding an extra attribute to the children. But, the problem with that is if I apply CSS style (padding), it also appears in the parent node.
any help to fix this?
Thanking in advance.
Congrats on your release.
Can you please provide some basic examples? For example how can I zoom and pan, insert data and so on.
How do I access the node click event in Vue?
Thank You
Hi @dabeng, I'm a bit newbie to Vue, but I find a great potential of your project to my side project.
How can I create an export to JSON and export to image buttons? Is it possible to have a exposed function?
If it is not implemented yet, are you going to implement it for your next release?
Thank you so much
Good luck with your new project!
Can you provide a schedule for the project? I was waiting a long time to use org chart with Vue.
Thank you!
When I am trying to filter the nodes into parent and three children such that the lines will be shown. The lines are not appearing .Don't know why.
@dabeng
The content is the same as the title.
Is there any way to programmatically pan to the location of a node?
For example, if the orgchart becomes really wide we may want to pan to the top-most node so that it appears on screen. Or, we might want to have a side menu that lists items from the current 'node levels deep' which, when selected, jumps to the location of that node in the orgchart.
I have attempted this myself, but I am unable to figure it out - I've dived into grabbing what I can with document.getElementsByClassName("orgchart") but this hasn't worked for me - it's probably not ideal to be trying to go through the DOM anyway.
Hi, is there a way to use setChartScale in Vue as in jQuery version? Thanks!
Hey there. First a quick thank you for this great library.
I just find the mouse zoom a big annoying. It only zoom in and out from the center of the box.
Can it be zoom from where the mousse is positioned? This will avoid getting the box out of sight
Thanks
Alex.
i not understand what the meaning parameter node-data
on click-node
event.
how to get data object on node when clicked??
Hello @dabeng, I though of using this project in another project I need to create for my University (it must be in Vue so I can't use your other projects).
Problem is, that I need to implement it until the end of January and I saw that the only available prop is "datasource". I will be really glad to use the basic props that the JQuery project has (like createNode, direction and pan).
Are you planning to release those features on the next 1-2 weeks? it would really help me out because there is no good Vue projects which handles with tree charts.
Best regards,
Tom
What if my databases data is not structured like the original { title, name, children } object? is there anyway to make those keys dynamic, eg :keys=[text, description, nodes, icon]
can we add direction attribute like we have in web components package.
Hi, I am not able to use the export chart functionality. I noticed it is available in the jQuery version but dont seem to find it in the Vue version.
orgchart.umd.min.js?e0d6:1 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
at Proxy.i (orgchart.umd.min.js?e0d6:1)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1168)
at componentEffect (runtime-core.esm-bundler.js?5c40:5214)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5167)
at mountComponent (runtime-core.esm-bundler.js?5c40:5126)
at processComponent (runtime-core.esm-bundler.js?5c40:5084)
at patch (runtime-core.esm-bundler.js?5c40:4690)
at mountChildren (runtime-core.esm-bundler.js?5c40:4874)
Hi, first of all thank you .
I'm on Nuxt and the chart works fine in desktop but it will not be zoomed or panned in touch devices. The pinch gesture zoom-in/zoom-out the whole page!
Hi we found this injection weakness.
TMS4422 - jQuery HTML Injection Weakness
Could you update vue-orgchar's jquery to latest version in order to solve this weakness?
Thanks.
Hi @dabeng, Which of the following options are available on your Vue orgchart project? (I took it from your other orgchart project).
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.