AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。
點擊下載AnyChart最新版
箱形圖可視化世界幸福報告數據，封面圖像為如何使用JavaScript HTML5構建交互式箱形圖的指南數據可視化是數據科學家工具包中重要的，有時被低估的工具。它使我們能夠通過探索性數據分析獲得對數據的理解和直覺，這會影響預處理，特征工程以及正確的機器學習算法選擇。它還有助于更好地評估模型，甚至還允許您在數據中發現模型性能可能不佳的區域。
通過增加交互性，使數據可視化更進一步是有利的。通過將可視化元素添加到可視化中，您可以創建更加引人入勝的體驗。反過來，這使用戶可以“探索”可視化效果，而不僅僅是閱讀它們！
在本教程中，我將介紹如何使用JavaScript和圖表庫構建交互式數據可視化，特別是以箱形圖為例。首先，我將簡要介紹箱形圖的基礎知識，然后再進行構建箱形圖的步驟，然后最后在一個有趣的示例中使用該技術，研究行星不同區域之間的幸福度分布，以嘗試回答問題。
什么是箱形圖？
箱形圖（也稱為箱須圖）是一種數據可視化技術，用于可視化數據集的描述性統計數據。盡管此圖表類型在理解單個數據集分布方面不如直方圖有用，但這些可視化效果很好，允許用戶比較不同的數據集。
箱形圖可視化了以下匯總統計數據：中位數，第一和第三四分位數（Q1和Q3），低和高以及離群值。這些顯示如下：
創建一個JavaScript箱形圖
要構建交互式數據可視化，有很多選擇。如果您想了解JavaScript替代方法，可以在此處查看。在此示例中，我將使用JS圖表庫，尤其是AnyChart。我正在使用AnyChart，因為它支持箱形圖（在多個其他圖表類型中），并且我認為其文檔和API確實對初學者和高級用戶都非常有用，但更適合您需求的替代方案也可以工作并將遵循類似的步驟。
第1步：設置頁面
第一步是為箱形圖可視化設置頁面。這包括添加HTML元素，加載所需的腳本以及為圖表設置CSS。看起來像：
<html>
<head>
<script src="http://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="http://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知識即可上手（取決于您使用的圖表庫），并且效果很好！在這里，我創建了一個箱形圖，但是其他圖表類型的過程非常相似，并且通過查閱文檔可以很容易地進行更改。
無論是更有趣的自定義設置還是使用不同的數據源，這只是冰山一角。我希望本箱圖和晶須圖教程可以成為進一步學習的理想跳板！
相關產品推薦：
AnyGantt——構建復雜且內容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
18次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線