开源图表库Highcharts教程:Highcharts中的暗黑模式

翻译|使用教程|编辑:吴园园|2020-05-22 10:35:09.117|阅读 14 次

概述:Highcharts中可以调整图表模式。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

我不讨厌黑暗模式,但是…

也许我的时机很糟糕。因为2019年是Dark Mode的一年,所以我认为我想在iPhone上测试新功能,并在日落之后启用Dark Mode。那是在一月份,在黑暗的北欧冬季,我的大脑已经为白天而尖叫。在观察了令人沮丧的OS和网站和应用程序的黑色实现几周后,在雨水从上面阴暗的天空倾泻而下的时候,我得出结论,深色设计是我最后需要的东西。 

我什至将网站重新设计为浅色主题,取消了长达20年的深色设计历史,以突出图像。

快进到五月,灿烂的北欧夏天即将到来。我发现一个暗黑的OS设计可以帮助大脑在夜间安顿下来并促进褪黑激素的产生。

因此,我着手寻找使网站服从OS的颜色模式设置的最佳方法,并找到了一篇不错的博客文章,即Darks模式,它使用preferreds-color-scheme规则和CSS变量。CSS变量是一个很棒的功能,所有现代浏览器(不包括IE11)都支持它们。另外,我的网站已经使用了它们,因此通过添加@media (prefers-color-scheme: dark)带有一些替代颜色的媒体查询()轻松实现了暗模式。 

我的网站上也有很多图表。使用Highcharts样式模式,所有颜色均由CSS设置,因此我以与网站其余部分相同的方式使图表服从颜色方案:

  1. 在:root选择器中定义了图表颜色。
  2. 在媒体查询中定义了深色图表颜色。

最终结果可以在www.vikjavev.no/ver上看到。如果您使用的是Mac,请依次转到设置,常规,然后在顶部切换外观。 

我还在下面的jsFiddle中提取了要点(请注意,jsFiddle UI本身始终是黑暗的):

开源图表库Highcharts教程:Highcharts中的暗黑模式

一个不错的小技巧是将文本元素应用于调整对比度,而不是使用其自身的“暗模式”替代定义一个单独的颜色变量。在jsFiddle中,例如可以看到副标题,它应该比主标题稍微暗一些。请注意,在提琴中,仅定义了一些fill-opacity适用于Highcharts的CSS类,以避免使演示过大。


想要购买Highcharts正版授权的朋友可以咨询慧都官方客服



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/products/highcharts/dark-mode-in-highcharts/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat