Highcharts v13 Beta 版正式发布｜数据、模块加载更新详解

Highcharts 13 公开测试版本现已上线。本次大版本更新围绕简化图表配置、统一品牌样式、规避视觉错乱问题优化升级正式版将于 6 月初推出目前欢迎开发者提前体验试用。本次更新新增调色板配置、数据表数据源、模块自动加载实验性功能同时对界面设计与交互体验进行多处打磨让日常图表呈现效果更加精致。一、调色板统一色彩管理Highcharts 13 全新推出调色板配置项支持为单张或批量图表搭建统一色彩体系不仅便于品牌风格统一适配深色模式显示效果也更为规整大幅减少大批量图表维护中的重复配色操作。借助调色板可统一设置数据系列配色、深浅模式下的背景色、坐标轴、标题、标签等图表元素色彩以及交互高亮色等样式参数。javascriptHighcharts.setOptions({ palette: { colors: [#e32412, #fadb8b, #2364b9, #059649], light: { backgroundColor: #f6f5f4, highlightColor: #e32412 }, dark: { backgroundColor: #1b1918, highlightColor: #fadb8b } } });系列与数据点基础配色统一收纳在调色板参数内也可单独为深浅模式差异化定义配色。新增色彩模式参数可选择浅色、深色、跟随系统深浅切换、继承页面样式四种模式图表能够自动适配系统偏好或页面主题。运行过程中调色板色彩会自动转为 CSS 变量生效图表样式可直接调用变量赋值无需重复填写色值代码。单张图表改动效果并不突出对于企业仪表盘批量开发场景该功能可极大缩减维护成本。title: { style: { color: var(--highcharts-neutral-color-60) } }这套全新调色板体系替代了以往的自适应主题功能。设计师可集中定义整套色彩规范开发者无需零散修改样式终端图表也能自然适配明暗使用场景。二、原生数据表数据源接入新版本支持直接以表格数据作为图表数据源适配数据库表单、CSV 文件、接口返回数据、仪表盘共享数据集等各类常用数据格式。以往开发大多手动整理数组数据匹配图表结构如今无需重构原始数据通过全局数据表、系列独立数据表、数据映射规则就能将表格字段直接对应绑定图表坐标轴与数据节点。javascriptconst dataTable new Highcharts.DataTable({ columns: { Year: [2020, 2021, 2022, 2023], Cost: [11, 13, 12, 14], Revenue: [12, 15, 14, 18] } }); Highcharts.chart(container, { dataTable, plotOptions: { series: { dataMapping: { x: Year } } }, series: [ { dataMapping: { y: Cost } }, { dataMapping: { y: Revenue } } ] });一份数据表可支撑多条数据系列展示通用坐标轴映射统一全局配置各系列仅需配置独有数据字段。若表格字段命名符合通用规范框架会自动完成映射匹配字段名称特殊时手动配置映射关系即可。数据表既可以全局挂载也能单独绑定至指定数据系列同时支持普通数组与类型化数组格式适配海量数据渲染场景。series: [{ name: Options array, dataTable: { columns: { x: [2026, 2027, 2028, 2029], y: [4, 2, 5, 1], z: [2, 1, 4, 2] } } }, { name: Instance array, dataTable: new DataTable({ columns: { x: [2026, 2027, 2028, 2029], y: [3, 6, 5, 7] } }) }, { name: Options typed array, dataTable: { columns: { x: new Uint16Array([2026, 2027, 2028, 2029]), y: new Uint8Array([6, 4, 7, 3]) } } }, { name: Instance typed array, dataTable: new DataTable({ columns: { x: new Uint16Array([2026, 2027, 2028, 2029]), y: new Uint8Array([9, 5, 9, 4]) } }) }]性能层面同样得到优化搭配加速模块使用时50 万数据节点规模的图表中数据表加载方式比传统数组数据加载速度提升约两成轻量化代码改动即可显著提升大数据仪表盘运行效率。三、实验性模块自动加载功能开发中时常会因遗漏引入配套模块导致气泡图等特殊图表无法正常渲染全新实验性自动加载脚本可解决该问题。程序会自动识别图表配置所需功能模块在图表渲染前异步加载对应资源尤其适配后台管理系统、图表编辑器、动态配置仪表盘、智能生成图表等动态拼装配置的场景。javascriptconst { default: Highcharts } await import( https://code.highcharts.com/esm/highcharts-autoload.js ); await Highcharts.chart(container, { chart: { type: bubble }, exporting: { enabled: true }, accessibility: { enabled: true }, series: [{ data: [[1, 2, 10], [2, 3, 15], [3, 1, 8]] }] });自动加载工具不仅调取功能模块启用样式模式、股票工具等功能时也会同步加载配套样式文件与交互组件。该功能不会替代手动打包部署项目模块固定的场景下手动引入依旧能实现精细化管控。本次 v13 三大核心更新精准聚焦开发效率、视觉统一、场景适配三大核心痛点调色板体系解决了多图表配色混乱、主题适配繁琐的视觉与维护问题DataTable 数据表重构数据接入逻辑兼容全品类结构化数据同时优化大数据渲染性能自动加载功能解放开发者告别手动管理模块依赖的繁琐操作。三者相辅相成大幅降低了 Highcharts 复杂图表的开发门槛尤其适配企业级批量仪表盘、动态可视化大屏、大数据图表项目让图表开发更简洁、规范、高效。