91视频免费观看,日韩岛国AV在线,亚洲国产精品在线

開源圖表庫Highcharts教程：Highcharts中的暗黑模式

翻譯|使用教程|編輯：吳園園|2020-05-22 10:35:09.117|閱讀 575 次

概述：Highcharts中可以調(diào)整圖表模式。

相關(guān)鏈接：

Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

我不討厭黑暗模式，但是…

也許我的時機(jī)很糟糕。因為2019年是Dark Mode的一年，所以我認(rèn)為我想在iPhone上測試新功能，并在日落之后啟用Dark Mode。那是在一月份，在黑暗的北歐冬季，我的大腦已經(jīng)為白天而尖叫。在觀察了令人沮喪的OS和網(wǎng)站和應(yīng)用程序的黑色實現(xiàn)幾周后，在雨水從上面陰暗的天空傾瀉而下的時候，我得出結(jié)論，深色設(shè)計是我最后需要的東西。

我什至將網(wǎng)站重新設(shè)計為淺色主題，取消了長達(dá)20年的深色設(shè)計歷史，以突出圖像。

快進(jìn)到五月，燦爛的北歐夏天即將到來。我發(fā)現(xiàn)一個暗黑的OS設(shè)計可以幫助大腦在夜間安頓下來并促進(jìn)褪黑激素的產(chǎn)生。

因此，我著手尋找使網(wǎng)站服從OS的顏色模式設(shè)置的最佳方法，并找到了一篇不錯的博客文章，即Darks模式，它使用preferreds-color-scheme規(guī)則和CSS變量。CSS變量是一個很棒的功能，所有現(xiàn)代瀏覽器（不包括IE11）都支持它們。另外，我的網(wǎng)站已經(jīng)使用了它們，因此通過添加@media (prefers-color-scheme: dark)帶有一些替代顏色的媒體查詢（）輕松實現(xiàn)了暗模式。

我的網(wǎng)站上也有很多圖表。使用Highcharts樣式模式，所有顏色均由CSS設(shè)置，因此我以與網(wǎng)站其余部分相同的方式使圖表服從顏色方案：

在:root選擇器中定義了圖表顏色。
在媒體查詢中定義了深色圖表顏色。

最終結(jié)果可以在www.vikjavev.no/ver上看到。如果您使用的是Mac，請依次轉(zhuǎn)到設(shè)置，常規(guī)，然后在頂部切換外觀。

我還在下面的jsFiddle中提取了要點（請注意，jsFiddle UI本身始終是黑暗的）：

開源圖表庫Highcharts教程：Highcharts中的暗黑模式

一個不錯的小技巧是將文本元素應(yīng)用于調(diào)整對比度，而不是使用其自身的“暗模式”替代定義一個單獨的顏色變量。在jsFiddle中，例如可以看到副標(biāo)題，它應(yīng)該比主標(biāo)題稍微暗一些。請注意，在提琴中，僅定義了一些fill-opacity適用于Highcharts的CSS類，以避免使演示過大。

想要購買Highcharts正版授權(quán)的朋友可以

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：

上一篇：三分鐘帶你解鎖 ComponentOne Studio 軟件環(huán)境！下一篇：UML工具Visual Paradigm教程：如何繪制BPMN對話圖？