圖表控制元件AnyChart使用JavaScript構建箱形圖教程
AnyChar是基於JavaScript (HTML5) 的圖表控制元件。使用AnyChart控制元件，可建立跨瀏覽器和跨平臺的互動式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用於儀表盤、報表、資料分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定製且高度相容。擁有純JavaScript API，AnyChart圖表內建客戶端資料實時更新，多層次向下鑽區和具體引數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和影象輸出能產出圖書質量列印文件。
箱形圖視覺化世界幸福報告資料，封面影象為如何使用JavaScript HTML5構建互動式箱形圖的指南資料視覺化是資料科學家工具包中重要的，有時被低估的工具。它使我們能夠通過探索性資料分析獲得對資料的理解和直覺，這會影響預處理，特徵工程以及正確的機器學習演算法選擇。它還有助於更好地評估模型，甚至還允許您在資料中發現模型效能可能不佳的區域。
通過增加互動性，使資料視覺化更進一步是有利的。通過將視覺化元素新增到視覺化中，您可以建立更加引人入勝的體驗。反過來，這使使用者可以“探索”視覺化效果，而不僅僅是閱讀它們！
在本教程中，我將介紹如何使用JavaScript和圖表庫構建互動式資料視覺化，特別是以箱形圖為例。首先，我將簡要介紹箱形圖的基礎知識，然後再進行構建箱形圖的步驟，然後最後在一個有趣的示例中使用該技術，研究行星不同區域之間的幸福度分佈，以嘗試回答問題。
什麼是箱形圖？
箱形圖（也稱為箱須圖）是一種資料視覺化技術，用於視覺化資料集的描述性統計資料。儘管此圖表型別在理解單個數據集分佈方面不如直方圖有用，但這些視覺化效果很好，允許使用者比較不同的資料集。
箱形圖可視化了以下彙總統計資料：中位數，第一和第三四分位數（Q1和Q3），低和高以及離群值。這些顯示如下：
建立一個JavaScript箱形圖
要構建互動式資料視覺化，有很多選擇。如果您想了解JavaScript替代方法，可以在此處檢視。在此示例中，我將使用JS圖表庫，尤其是AnyChart。我正在使用AnyChart，因為它支援箱形圖（在多個其他圖表型別中），並且我認為其文件和API確實對初學者和高階使用者都非常有用，但更適合您需求的替代方案也可以工作並將遵循類似的步驟。
第1步：設定頁面
第一步是為箱形圖視覺化設定頁面。這包括新增HTML元素，載入所需的指令碼以及為圖表設定CSS。看起來像：
<html>
<head>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
anychart.onDocumentReady(function () {
// code goes here.
});
</script>
</html>
使用圖表庫時，您需要匯入正確的指令碼才能使用該庫，並且在某些情況下，需要使用不同的模組來處理不同的圖表型別。例如，要訪問AnyChart的箱須圖，我將需要使用基本模組。
排序後，我將需要為圖表元素設定CSS屬性。在這裡，我將箱形圖設定為具有100％的寬度和高度。您可以根據自己的用例進行更改。CSS的width和height屬性接受百分比（父元素的百分比）和各種長度單位（最常見的是畫素）。
最後，我有一個帶有JavaScript函式的script標記，anychart.onDocumentReady()這只是在載入文件時觸發的函式。將JavaScript圖表程式碼放在此函式中可確保該程式碼不會在頁面準備就緒之前觸發，這可能會導致不良結果（請在非同步JavaScript上閱讀以瞭解更多資訊）。
步驟2：載入資料
我將使用來自《世界幸福報告》的資料，該資料是一項全球調查得出的結果，該調查試圖將每個國家公民的幸福量化為0到10之間的一個值。我從Kaggle獲得了此資料，這是一個尋找樂趣的好地方和有趣的資料集。誠然，它們中的大多數都是針對機器學習應用程式的，但有一些可以很好地用於資料視覺化。
在準備繪製箱形圖時，我需要以我們選擇的製圖庫可接受的格式和形式提供資料。例如，AnyChart JS接受以下格式的箱形圖資料：
{x:"Name", low: value, q1: value, median: value, q3: value, high: value, outliers: array}
其中x是標籤，q1和q3是第一個和第三個四分位數，低和高分別是q1之下的1.5 x四分位數範圍和q3之上的1.5 x四分位數範圍，離群值是包含所有離群值的陣列。
我已經方便地對世界幸福報告中的資料進行了預處理，以產生以下陣列：
var data = [
{x:"Western Europe", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},
{x:"North America", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},
{x:"Australia and New Zealand", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},
{x:"Middle East and Northern Africa", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},
{x:"Latin America and Caribbean", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},
{x:"Southeastern Asia", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},
{x:"Central and Eastern Europe", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},
{x:"Eastern Asia", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},
{x:"Sub-Saharan Africa", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},
{x:"Southern Asia", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}
]
步驟3：繪製箱形圖
僅需這些幾行程式碼，我便可以繪製箱形圖：
// create a chart
chart = anychart.box();
// create a box series and set the data
series = chart.box(data);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
將所有這些放在一起，您將獲得以下內容：
<html>
<head>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
anychart.onDocumentReady(function () {
var data = [
{x:"Western Europe", low: 5.03, q1: 6.36, median: 6.91, q3: 7.34, high: 7.53},
{x:"North America", low: 7.10, q1: 7.18, median: 7.25, q3: 7.33, high: 7.40},
{x:"Australia and New Zealand", low: 7.31, q1: 7.32, median: 7.32, q3: 7.33, high: 7.33},
{x:"Middle East and Northern Africa", low: 3.07, q1: 4.78, median: 5.30, q3: 6.30, high: 7.27},
{x:"Latin America and Caribbean", low: 4.87, q1: 5.80, median: 6.13, q3: 6.66, high: 7.09, outliers: [4.03]},
{x:"Southeastern Asia", low: 3.91, q1: 4.88, median: 5.28, q3: 6.01, high: 6.74},
{x:"Central and Eastern Europe", low: 4.22, q1: 5.15, median: 5.49, q3: 5.81, high: 6.60},
{x:"Eastern Asia", low: 4.91, q1: 5.30, median: 5.65, q3: 5.90, high: 6.38},
{x:"Sub-Saharan Africa", low: 2.91, q1: 3.74, median: 4.13, q3: 4.43, high: 5.44, outliers: [5.648]},
{x:"Southern Asia", low: 4.40, q1: 4.41, median: 4.64, q3: 4.96, high: 5.20, outliers: [3.36]}
]
// create a chart
chart = anychart.box();
// create a box series and set the data
series = chart.box(data);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</html>
結果是：
通過這些簡單的步驟，我快速製作了一個功能非常強大的互動式盒須圖，現在可以輕鬆地將其嵌入任何網站或應用程式中！
雖然還不錯，但我認為我可以做得更好,繼續閱讀。
步驟4：自定義盒須圖
資料視覺化不僅僅是處理一些資料並將其放入圖表中。這是講故事的。這是為了進行調整以突出顯示見解或使視覺化效果更引人入勝。
所有體面的圖表庫都將提供許多方法來實現此目的。他們將通過其API提供此選項，您通常可以通過閱讀其文件來找到這些選項。在此示例中，當我使用AnyChart JS圖表庫時，我將介紹一些可用於箱形圖的自定義選項。
定製圖表設計
可以更改視覺化的許多外觀和功能方面。首先，我將新增一個自定義標題，更改各個軸標籤，並錯開x軸標籤以防止它們重疊：
// set the chart title
var title = chart.title("Happiness Level by Region");
// label axis
chart.xAxis().title("Regions");
chart.yAxis().title("Happiness Level");
// stagger the x-axis labels
chart.xAxis().staggerMode(true);
例如，對於框本身，我可以更改其預設狀態，懸停時的狀態以及選中狀態的詳細資訊。我可以對中線，莖幹，晶須以及離群值進行類似的更改。通常，我會利用這些自定義選項來使我的視覺化效果更好地適應我將要託管的位置的佈局/主題，或者更好地適合顯示的資料（例如，在視覺化環境資料時使用綠色）。
對於離群值，我什至可以通過設定標記型別來更改形狀。（AnyChart有各種選項，可以在API參考中看到）。
使用以下程式碼可以輕鬆進行這些更改：
// configure visual appearance of series
series.normal().fill("#36558F", 0.2);
series.hovered().fill("#36558F", 0.2);
series.selected().fill("#36558F", 0.6);
series.normal().stroke("#36558F", 1);
series.hovered().stroke("#36558F", 2);
series.selected().stroke("#36558F", 4);
// configure medians
series.normal().medianStroke("#dd2c00", 1);
series.hovered().medianStroke("#dd2c00", 2);
series.selected().medianStroke("#dd2c00", 2);
// configure outliers
series.normal().outlierMarkers({
fill: "#36558F 0.2",
stroke: { color: "#36558F", thickness: 1 },
size: 5,
type: "star5",
});
series.hovered().outlierMarkers({
fill: "#36558F 0.2",
stroke: { color: "#36558F", thickness: 2 },
size: 5,
type: "star5",
});
series.selected().outlierMarkers({
fill: "#36558F 0.6",
stroke: { color: "#36558F", thickness: 4 },
size: 7.5,
type: "star5",
});
// configure stems
series.normal().stemStroke("#36558F", 0.5);
series.hovered().stemStroke("#36558F", 1);
series.selected().stemStroke("#36558F", 2);
// configure whiskers
series.whiskerWidth(50);
series.normal().whiskerStroke("#36558F", 0.5);
series.hovered().whiskerStroke("#36558F", 1);
series.selected().whiskerStroke("#36558F", 2);
在這裡，我分別輸入顏色和不透明度以及填充和筆觸的顏色和寬度。顏色引數可以多種接受的格式給出。在這裡，我介紹了使用更廣泛的十六進位制程式碼。
結合所有這些結果可得出：
改善箱形圖工具提示
您可能已經注意到，將滑鼠懸停在一個框上時，您會看到用於繪製這些圖的所有彙總統計資訊……但異常值除外。我將解決此問題，並將異常資料也新增到箱形圖工具提示中。
// configure tooltip
chart.tooltip().titleFormat("Region: {%x}")
chart.tooltip().format("Low: {%low} \n High: {%high} \n Quantile 1: {%q1} \n Quantile 3: {%q3} \n Median: {%median} \n Outliers: {%outliers}");
並且，如果將其新增到先前的程式碼中，則會得到以下互動式箱須圖：
我們只是將幸福形象化（分類）！從上面的情節中，我可以清楚地看到撒哈拉以南非洲不是最幸福的地方，而西歐人和北美人笑到最幸福的地方顯然是澳大利亞和紐西蘭！
結論
如您所見，進行互動式資料視覺化非常容易。它不需要太多的JavaScript知識即可上手（取決於您使用的圖表庫），並且效果很好！在這裡，我建立了一個箱形圖，但是其他圖表型別的過程非常相似，並且通過查閱文件可以很容易地進行更改。
無論是更有趣的自定義設定還是使用不同的資料來源，這只是冰山一角。我希望本箱圖和晶須圖教程可以成為進一步學習的理想跳板！