如何自定義折線圖

　　我們按照上面的四個(gè)步驟創(chuàng)建的基本折線圖已經(jīng)看起來(lái)不錯(cuò)。但是，如果您想自定義它呢？

　　讓我向您展示如何以同樣快速簡(jiǎn)便的方式進(jìn)行一些更改。

　　1. 命名軸

　　解釋折線圖的每個(gè)軸代表什么總是一個(gè)好主意，即使它看起來(lái)很明顯。要將標(biāo)題同時(shí)添加到 X 軸和 Y 軸，請(qǐng)使用以下命令：

　　2. 自定義標(biāo)記

　　默認(rèn)情況下，將鼠標(biāo)指針移到繪圖上時(shí)，標(biāo)記將顯示在每個(gè)線系列上，并且它們的形狀不同。為什么不給標(biāo)記相同的形狀？另外，如果能把它們變小就好了。

　　了解如何自定義線條系列標(biāo)記的外觀:

　　3. 啟用十字準(zhǔn)線

　　十字準(zhǔn)線是鼠標(biāo)指針后面的一對(duì)垂直線，可幫助您更好地了解當(dāng)前懸停的任何點(diǎn)處的 X 和 Y 值。

　　在這種情況下，只需獲得一條這樣的垂直線即可突出顯示年份。這是如何完成的：

　　4. 更改工具提示位置

　　目前，工具提示跟隨鼠標(biāo)指針。但在這種情況下，最好讓它堅(jiān)持?jǐn)?shù)據(jù)點(diǎn)。

　　要實(shí)現(xiàn)這種行為，只需將折線圖工具提示位置模式定義為“點(diǎn)”，然后根據(jù)您的喜好微調(diào)其他位置設(shè)置。例如：

　　看看在所有這些自定義之后，JavaScript 折線圖現(xiàn)在的外觀。(在CodePen[或任何圖表游樂(lè)場(chǎng)]上看到完整的代碼。

　　5. 更改顏色

　　個(gè)性化數(shù)據(jù)可視化的最簡(jiǎn)單但最有效的方法之一是使用顏色。

　　下面的代碼將每個(gè)球員的線路顏色更改為他贏得最多次數(shù)的大滿貫賽事的主色：溫布爾登的紫色代表費(fèi)德勒，法國(guó)公開(kāi)賽的棕色代表納達(dá)爾，澳大利亞網(wǎng)球公開(kāi)賽的藍(lán)色代表德約科維奇。此外，還調(diào)整了線條的粗細(xì)。

　　6. 改進(jìn)標(biāo)題和圖例文本

　　我想在本教程中演示的最后一項(xiàng)更改(并使交互式折線圖完整)是標(biāo)題和圖例自定義。

　　您可以添加副標(biāo)題以提供更多上下文，并且可以借助HTML進(jìn)行一些快速調(diào)整，使文本樣式更具吸引力：

　　對(duì)于圖表圖例，可以輕松修改字體大小和填充：

　　chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);

　　看看我們得到了什么！(在代碼筆[或任何圖表游樂(lè)場(chǎng)]上查看此JS折線圖。)

　　如何創(chuàng)建步長(zhǎng)折線圖

　　就像當(dāng)網(wǎng)球比賽是五盤比賽時(shí)總是更令人興奮一樣，這里有一些額外的東西可以使本教程和這個(gè)折線圖可視化更加令人敬畏。

　　從數(shù)據(jù)可視化的角度來(lái)看，在這種情況下，階梯折線圖實(shí)際上會(huì)更好用。我們只需一個(gè)小小的修改就可以做一個(gè)。

　　只需將函數(shù)更改為，折線圖將成為階梯折線圖：line()stepLine()

　　享受優(yōu)雅的JavaScript驅(qū)動(dòng)的階梯式折線圖，可視化網(wǎng)球三巨頭之間的大滿貫冠軍爭(zhēng)奪戰(zhàn)。(隨意探索并繼續(xù)在CodePen[或任何圖表游樂(lè)場(chǎng)]上玩其完整的源代碼。

　　這是完整的代碼：

　　正如您在本教程中看到的，使用 JavaScript 創(chuàng)建交互式折線圖(和階梯折線圖)非常簡(jiǎn)單。如果您有任何問(wèn)題或建議，請(qǐng)告訴我。

　　看到這些偉人在職業(yè)生涯中取得了如此大的成就，真是令人振奮。

　　讓我們利用這一靈感，通過(guò)構(gòu)建更多(以及更棒的)圖表和圖形，在數(shù)據(jù)可視化開(kāi)發(fā)領(lǐng)域取得成功！