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设置，因此我以与 站其余部分相同的方式使图表服从颜色方案：
- 在:root选择器中定义了图表颜色。
- 在媒体查询中定义了深色图表颜色。
最终结果可以在www.vikjavev.no/ver上看到。如果您使用的是Mac，请依次转到设置，常规，然后在顶部切换外观。
我还在下面的jsFiddle中提取了要点（请注意，jsFiddle UI本身始终是黑暗的）：
一个不错的小技巧是将文本元素应用于调整对比度，而不是使用其自身的“暗模式”替代定义一个单独的颜色变量。在jsFiddle中，例如可以看到副标题，它应该比主标题稍微暗一些。请注意，在提琴中，仅定义了一些fill-opacity适用于Highcharts的CSS类，以避免使演示过大。
想要购买Highcharts正版授权的朋友可以咨询官方客服
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！