Hi guys,
I need to scale the Gantt like map when you scroll the mousewheel it can be enlarge or shrink.
However, I find it can change the zoom config to scale the chart,
but the effect wasn’t what we wanted as it has changed the time unit’s step.
so, is there any other way or suggestions to make it scale like map without change the step?
Here are the map just for your reference.
[https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map]
All help and info is greatly appreciated.
Hello,
Unfortunately, there is no built-in way to scale the chart without changing the time unit’s step. But you can implement it in a custom solution. One of the options is to create a function that will change the columns of the timeline area of the Gantt depending on the mouse wheel scroll.
You can track the number of scrolled pixels with the help of event.deltaY property. You need to use min_column_width property to set the width for a column in the timeline area. The article about it:
https://docs.dhtmlx.com/gantt/api__gantt_min_column_width_config.html ;
The logic of this function is to change the min_column_width depending on the received value from the event.deltaY property:
function onMouseWheel(event) {
let wy = event.deltaY;
let diff = wy < 0 ? 1 : -1;
let currentLevel = gantt.config.min_column_width;
let level = currentLevel + diff * 10;
if (level != currentLevel) {
currentLevel = level;
gantt.config.min_column_width = currentLevel;
gantt.render();
}
}
Note, that you need to use gantt.render method to re-render the Gantt after changing the width:
https://docs.dhtmlx.com/gantt/api__gantt_render.html ;
Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/p5orjjaj ;
This is not a complete solution, but I hope it’ll show you a right direction.