精品成人一区二区三区电影,国产欧美日韩精品一区二区三区 ,日本最大色倩网站www

開(kāi)源圖表庫(kù)Highcharts教程：Highcharts中的暗黑模式

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

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

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

點(diǎn)擊下載Highcharts最新試用版

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

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

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

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

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

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

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

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

我還在下面的jsFiddle中提取了要點(diǎn)（請(qǐng)注意，jsFiddle UI本身始終是黑暗的）：

開(kāi)源圖表庫(kù)Highcharts教程：Highcharts中的暗黑模式

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

想要購(gòu)買(mǎi)Highcharts正版授權(quán)的朋友可以

標(biāo)簽：

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

文章轉(zhuǎn)載自：

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