下面是一个示例代码,展示了如何使用AnyGantt库来实现缩放和悬停/选择的转换:
AnyGantt - 缩放和悬停/选择的转换
在上述代码中,我们首先引入了AnyGantt的JavaScript库文件,然后创建了一个Div容器来放置图表。接着,我们在标签中使用
anychart.onDocumentReady
方法来确保DOM加载完成后再执行代码。
在代码中,我们创建了一个AnyGantt的Gantt图表实例,并使用chart.data
方法设置图表的数据。接着,我们使用chart.zoomTo
方法启用了缩放功能,并将缩放级别设置为"week"。接下来,我们使用chart.tooltip(true)
和chart.interactivity().selectionMode("single")
方法分别启用了悬停和选择功能。
最后,我们使用chart.container
方法将图表渲染到指定的容器中,并使用chart.draw
方法绘制图表。
运行上述代码,你将看到一个包含缩放和悬停/选择功能的AnyGantt图表。你可以通过缩放按钮来缩放图表的时间轴,并且当鼠标悬停在任务上时,会显示任务的详细信息。你还可以点击任务来选择它,并在图表中突出显示。