AnyGantt - 缩放和悬停/选择的转换

下面是一个示例代码，展示了如何使用AnyGantt库来实现缩放和悬停/选择的转换：

<!DOCTYPE html>
<html>
<head>
  <title>AnyGantt - 缩放和悬停/选择的转换</title>
  <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-bundle.min.js"></script>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script>
    anychart.onDocumentReady(function() {
      // 创建一个Gantt图表实例
      var chart = anychart.ganttProject();

      // 设置图表数据
      chart.data([
        {id: "1", name: "任务1", actualStart: "2022-01-01", actualEnd: "2022-01-10"},
        {id: "2", name: "任务2", actualStart: "2022-01-05", actualEnd: "2022-01-15"},
        {id: "3", name: "任务3", actualStart: "2022-01-10", actualEnd: "2022-01-20"},
      ]);

      // 启用缩放功能
      chart.zoomTo("week");

      // 启用悬停/选择功能
      chart.tooltip(true);
      chart.interactivity().selectionMode("single");

      // 渲染图表
      chart.container("container");
      chart.draw();
    });
  </script>
</body>
</html>

在上述代码中，我们首先引入了AnyGantt的JavaS cript库文件，然后创建了一个Div容器来放置图表。接着，我们在<script>标签中使用anychart.onDocumentReady方法来确保DOM加载完成后再执行代码。

在代码中，我们创建了一个AnyGantt的Gantt图表实例，并使用chart.data方法设置图表的数据。接着，我们使用chart.zoomTo方法启用了缩放功能，并将缩放级别设置为"week"。接下来，我们使用chart.tooltip(true)和chart.interactivity().selectionMode("single")方法分别启用了悬停和选择功能。

最后，我们使用chart.container方法将图表渲染到指定的容器中，并使用chart.draw方法绘制图表。

运行上述代码，你将看到一个包含缩放和悬停/选择功能的AnyGantt图表。你可以通过缩放按钮来缩放图表的时间轴，并且当鼠标悬停在任务上时，会显示任务的详细信息。你还可以点击任务来选择它，并在图表中突出显示。

本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。

展开更多

开发者特惠

面向开发者的云福利中心，ECS 60元/年，域名1元起，助力开发者快速在云上构建可靠应用

ECS首年60元

社区干货

【MindStudio训练营第一季】基于U-Net网络的图像分割的MindStudio实践

模型转换将unet_hw960_bs1.air模型转为昇腾AI处理器支持的.om格式离线模型,此处模型转换需要用到ATC工具。昇腾张量编译器(Ascend Tensor Compiler,简称ATC)是昇腾CANN架构体系下的模型转换工具,它可以将开源框架的网络模型或Ascend IR定义的单算子描述文件(json格式)转换为昇腾AI处理器支持的.om格式离线模型。模型转换过程中可以实现算子调度的优化、权值数据重排、内存使用优化等,可以脱离设备完成模型的预处理。[ATC参...

特惠活动

域名注册服务

cn/top/com等热门域名，首年低至1元，邮箱建站必选

￥1.00/首年起32.00/首年起

立即购买

DCDN国内流量包100G

同时抵扣CDN与DCDN两种流量消耗，加速分发更实惠

￥2.00/年20.00/年

立即购买

AnyGantt - 缩放和悬停/选择的转换-优选内容

2024年03月

从而筛选出最佳广告渠道。 *注意事项: 此功能为付费功能,如有需要请联系您的商务经理。此功能默认关闭,如需启用,请在部署时告知并开启对应功能开关。优化首页ID展示功能优化,支持垂直柱状图展示以及放大功能... 选择所需ID(目前仅支持单一指标可选ID类型) 新增生命周期分析路径跃迁新增系统预置路径,仅支持修改,不支持删除。用户也可点击新建路径根据业务需求自定义分析路径。优化生命周期分析流转分析支持导出分...

配置Hive模板规则

选择数据质量 > 数据监控 > 离线数据监控 > 监控对象,直接进入监控对象的模板规则页面。在页面右上角的项目下拉列表中,选择要管理的项目。在引擎下拉列表中,选择要配置的引擎和对应的实例。创建监控对象。单击... 当执行方式选择关联任务时,需设置该参数。注意由于动态阈值存在误报风险,当报警条件选择动态阈值时,请谨慎选择强规则。当弱规则转换成强规则时,报警形式将默认调整为紧急。 *熔断方式如果是强规则,可选择以...

【MindStudio训练营第一季】基于U-Net网络的图像分割的MindStudio实践

系统管理

将光标悬停至“安装失败”后的,可点击后侧图标,查看安装失败原因。手动安装Agent 下载Agent安装包用户可手动下载Agent安装包,并将其手动安装到需要审计的服务器上。目前支持Windows系统和部分Linux系统。下载Agent安装包的操作方法如下:在菜单栏选择“系统管理Agent管理”进入Agent管理页面,选择Agent安装页签,点击下载对应版本的Agent安装包。说明下载的Agent默认会将流量转发给当前的DBAudit。如需转发到其他DBAudit,请在...