首页/新闻资讯/正文详情

Highcharts Gantt使用符号的自定义数据标签开发甘特图示例

发布时间:2026/11/3 9:58:09 来源:云帆数科 栏目:资讯中心
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
使用符号的自定义数据标签、带头像 Font Awesome 图标标签的甘特图代码复制就能用完整可运行代码带头像 图标数据标签Highcharts.ganttChart(container, { title: { text: Highcharts Gantt Chart }, subtitle: { text: With custom symbols in data labels }, xAxis: { minPadding: 0.05, maxPadding: 0.05 }, yAxis: { categories: [Prototyping, Development, Testing] }, tooltip: { outside: true }, accessibility: { point: { valueDescriptionFormat: {point.yCategory}, assigned to {point.assignee} from {point.x:%Y-%m-%d} to {point.x2:%Y-%m-%d}. } }, lang: { accessibility: { axis: { xAxisDescriptionPlural: The chart has a two-part X axis showing time in both week numbers and days. } } }, series: [{ name: Project 1, data: [{ start: 2018-12-01, end: 2018-12-02, y: 0, assignee: bre1470 }, { start: 2018-12-02, end: 2018-12-05, y: 1, assignee: oysteinmoseng, fontSymbol: exclamation, accessibility: { description: Exclamation symbol. } }, { start: 2018-12-08, end: 2018-12-09, y: 2, assignee: TorsteinHonsi }, { start: 2018-12-09, end: 2018-12-19, y: 1, assignee: bre1470 }, { start: 2018-12-10, end: 2018-12-23, y: 2, assignee: TorsteinHonsi, fontSymbol: smile-o, accessibility: { description: Smiling face symbol. } }], dataLabels: [{ enabled: true, format: div stylewidth: 20px; height: 20px; overflow: hidden; border-radius: 50%; margin-left: -25px img srchttps://github.com/{point.assignee}.png stylewidth: 30px; margin-left: -5px; margin-top: -2px /div, useHTML: true, align: left }, { enabled: true, format: i classfa fa-{point.fontSymbol} stylefont-size: 1.5em/i, useHTML: true, align: right }] }] });这个图表的特色功能 ✨✅左侧显示 GitHub 圆形头像自动从 GitHub 加载✅右侧显示 Font Awesome 图标感叹号、笑脸等✅任务条左右双数据标签✅自定义任务分类原型 / 开发 / 测试✅鼠标悬浮提示✅无障碍访问支持关键点说明useHTML: true必须开启才能渲染img和i图标。assignee自定义字段存放 GitHub 用户名自动显示头像。fontSymbol自定义字段对应 Font Awesome 图标名称。Font Awesome 必须引入否则图标无法显示。直接复制保存为.html打开即可完美运行

相关推荐

体积缩减40%:Stereolabs 推出 ZED X Nano 腕部微型双目3D相机
体积缩减40%:Stereolabs 推出 ZED X Nano 腕部微型双目3D相机

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 9:57:04

【深度学习】国科大:CIFAR-100 图像分类项目
【深度学习】国科大:CIFAR-100 图像分类项目

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 9:57:04

【深度学习】MLP(多层感知机):神经网络基础
【深度学习】MLP(多层感知机):神经网络基础

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 9:57:04

如何10分钟跑通DeepSeek-V4.1-Flash-1017-oQ3e-ngram-mtp?oMLX下载与推理快速上手教程
如何10分钟跑通DeepSeek-V4.1-Flash-1017-oQ3e-ngram-mtp?oMLX下载与推理快速上手教程

如何10分钟跑通DeepSeek-V4.1-Flash-1017-oQ3e-ngram-mtp?oMLX下载与推理快速上手教程 想在 Apple Silicon 上本地跑起 DeepSeek-V4.1-Flash-1017-oQ3e-ngram-mtp 吗?这是由 oMLX(oQ)混合精度量化而成的 DeepSeek-V4.1-Flash 多模… · 2026/11/3 10:32:57

扒开 Nimble-9B 的训练配方:不写小作文只做选择题,90.12% 是这么炼成的
扒开 Nimble-9B 的训练配方:不写小作文只做选择题,90.12% 是这么炼成的

扒开 Nimble-9B 的训练配方:不写小作文只做选择题,90.12% 是这么炼成的 最近 AI 圈有个很有意思的风向:大家不比谁更能聊了,开始比谁更会“拍板”。 起因是 OpenAI 前研究员创业做的 Jev,一个不写文章、不聊天、只做判… · 2026/11/3 10:32:57

5 分钟给 AI 装个“快思考”大脑:不写一个字,0.1 秒做完判断,9B 小模型竟干翻 27B 大块头
5 分钟给 AI 装个“快思考”大脑:不写一个字,0.1 秒做完判断,9B 小模型竟干翻 27B 大块头

5 分钟给 AI 装个“快思考”大脑:不写一个字,0.1 秒做完判断,9B 小模型竟干翻 27B 大块头 你有没有被 AI 的“慢”折磨过? 问它一句“我这单该找售后还是找物流”,它先沉思三秒,再洋洋洒洒写两百字分析&… · 2026/11/3 10:32:57

国企算力平台抢着上架、海外开发者排队下载:Nex-N2.5 这张“国字号”背书,到底意味着什么
国企算力平台抢着上架、海外开发者排队下载:Nex-N2.5 这张“国字号”背书,到底意味着什么

国企算力平台抢着上架、海外开发者排队下载:Nex-N2.5 这张“国字号”背书,到底意味着什么 最近国产大模型圈有个挺有意思的现象。 一边是海外开发者社区里,有人凌晨蹲守新模型权重发布,下载、量化、跑分、截图,忙得不亦… · 2026/11/3 10:32:57

全分辨率Alpha抠图:WeVisOne-VL图像抠图实战与Prompt编写技巧
全分辨率Alpha抠图:WeVisOne-VL图像抠图实战与Prompt编写技巧

全分辨率Alpha抠图:WeVisOne-VL图像抠图实战与Prompt编写技巧 WeVisOne-VL-2B 是腾讯 WeChat Vision 团队开发的统一视觉感知模型,一句话就能完成图像抠图——无需人工绘制选区,只需输入一句 Prompt(如 "person"&#… · 2026/11/3 10:32:57

国产AI写歌三巨头正面刚:开源YuE2、抖音、MiniMax到底谁更值得玩?
国产AI写歌三巨头正面刚:开源YuE2、抖音、MiniMax到底谁更值得玩?

国产AI写歌三巨头正面刚:开源YuE2、抖音、MiniMax到底谁更值得玩? 你有没有过这种时刻:半夜灵感爆棚,脑子里盘旋着一段旋律,却既不会作曲也不会编曲,只能干着急?以前想给自己写首歌,… · 2026/11/3 10:31:56

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战
STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题
ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践
基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码