高级可视化图表的暗色模式与主题｜Highcharts 自适应主题配色全解

Highcharts 主题是一组预定义的选项在每个图表实例化之前作为默认的 Highcharts 选项应用。Highcharts 提供了几种主题可以通过在页面中包含以下模式的脚本标签轻松应用到您的图表中scriptsrchttps://code.highcharts.com/themes/adaptive.js/scriptTypeScript主题的源代码可以在 Highcharts repository找到.当使用 styledmode,时可以通过加载additional CSSfiles来应用主题。高级图表中的暗模式自适应主题Highcharts附带一个自适应主题/themes/adaptive.js, 它使用CSS变量根据用户偏好的配色方案进行响应式调整自v12.3起。它有三种模式System. 系统。除非由实现者另行指定否则自适应主题会根据 偏好色彩方案prefers-color-scheme CSS媒体查询使用配色方案。Forced light.强制亮色。如果任何图表父元素具有highcharts-light类名。Forced dark.强制暗色。如果任何图表父元素具有highcharts-dark类名。在典型的网站设置中最终用户可以在系统、浅色和深色模式之间切换。这可以与页面的类名关联以使图表保持一致。自适应主题可以扩展为两个层次按照下面的示例定义你自己的颜色变量。关于默认的CSS变量名请参见 css/colorsdemo.如果需要更细粒度的控制Highcharts中的颜色设置支持CSS变量例如background: var(--my-custom-background).创建你自己的主题通过创建一个配置对象并将其应用到图表中可以应用自定义主题使用 Highcharts.setOptions方法这在主题的JavaScript文件中完成。使用 调色板 辅助工具palette helper 来帮助你创建自己的颜色主题。这是一个简单的非自适应主题的示例Highcharts.theme{colors:[#058DC7,#50B432,#ED561B,#DDDF00,#24CBE5,#64E572,#FF9655,#FFF263,#6AF9C4],chart:{backgroundColor:{linearGradient:[0,0,500,500],stops:[[0,rgb(255, 255, 255)],[1,rgb(240, 240, 255)]]},},title:{style:{color:#000,font:bold 16px Trebuchet MS, Verdana, sans-serif}},subtitle:{style:{color:#666666,font:bold 12px Trebuchet MS, Verdana, sans-serif}},legend:{itemStyle:{font:9pt Trebuchet MS, Verdana, sans-serif,color:black},itemHoverStyle:{color:gray}}};// Apply the themeHighcharts.setOptions(Highcharts.theme);