AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實(shí)時(shí)更新，多層次向下鉆區(qū)和具體參數(shù)更新。強(qiáng)大的主題引擎使你通過一系列圖表進(jìn)行獨(dú)特的演示體驗(yàn)，而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。
點(diǎn)擊下載AnyChart最新版
箱形圖可視化世界幸福報(bào)告數(shù)據(jù)，封面圖像為如何使用JavaScript HTML5構(gòu)建交互式箱形圖的指南數(shù)據(jù)可視化是數(shù)據(jù)科學(xué)家工具包中重要的，有時(shí)被低估的工具。它使我們能夠通過探索性數(shù)據(jù)分析獲得對(duì)數(shù)據(jù)的理解和直覺，這會(huì)影響預(yù)處理，特征工程以及正確的機(jī)器學(xué)習(xí)算法選擇。它還有助于更好地評(píng)估模型，甚至還允許您在數(shù)據(jù)中發(fā)現(xiàn)模型性能可能不佳的區(qū)域。
通過增加交互性，使數(shù)據(jù)可視化更進(jìn)一步是有利的。通過將可視化元素添加到可視化中，您可以創(chuàng)建更加引人入勝的體驗(yàn)。反過來，這使用戶可以“探索”可視化效果，而不僅僅是閱讀它們！
在本教程中，我將介紹如何使用JavaScript和圖表庫構(gòu)建交互式數(shù)據(jù)可視化，特別是以箱形圖為例。首先，我將簡要介紹箱形圖的基礎(chǔ)知識(shí)，然后再進(jìn)行構(gòu)建箱形圖的步驟，然后最后在一個(gè)有趣的示例中使用該技術(shù)，研究行星不同區(qū)域之間的幸福度分布，以嘗試回答問題。
什么是箱形圖？
箱形圖（也稱為箱須圖）是一種數(shù)據(jù)可視化技術(shù)，用于可視化數(shù)據(jù)集的描述性統(tǒng)計(jì)數(shù)據(jù)。盡管此圖表類型在理解單個(gè)數(shù)據(jù)集分布方面不如直方圖有用，但這些可視化效果很好，允許用戶比較不同的數(shù)據(jù)集。
箱形圖可視化了以下匯總統(tǒng)計(jì)數(shù)據(jù)：中位數(shù)，第一和第三四分位數(shù)（Q1和Q3），低和高以及離群值。這些顯示如下：
創(chuàng)建一個(gè)JavaScript箱形圖
要構(gòu)建交互式數(shù)據(jù)可視化，有很多選擇。如果您想了解JavaScript替代方法，可以在此處查看。在此示例中，我將使用JS圖表庫，尤其是AnyChart。我正在使用AnyChart，因?yàn)樗С窒湫螆D（在多個(gè)其他圖表類型中），并且我認(rèn)為其文檔和API確實(shí)對(duì)初學(xué)者和高級(jí)用戶都非常有用，但更適合您需求的替代方案也可以工作并將遵循類似的步驟。
第1步：設(shè)置頁面
第一步是為箱形圖可視化設(shè)置頁面。這包括添加HTML元素，加載所需的腳本以及為圖表設(shè)置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>
使用圖表庫時(shí)，您需要導(dǎo)入正確的腳本才能使用該庫，并且在某些情況下，需要使用不同的模塊來處理不同的圖表類型。例如，要訪問AnyChart的箱須圖，我將需要使用基本模塊。
排序后，我將需要為圖表元素設(shè)置CSS屬性。在這里，我將箱形圖設(shè)置為具有100％的寬度和高度。您可以根據(jù)自己的用例進(jìn)行更改。CSS的width和height屬性接受百分比（父元素的百分比）和各種長度單位（最常見的是像素）。
最后，我有一個(gè)帶有JavaScript函數(shù)的script標(biāo)記，anychart.onDocumentReady()這只是在加載文檔時(shí)觸發(fā)的函數(shù)。將JavaScript圖表代碼放在此函數(shù)中可確保該代碼不會(huì)在頁面準(zhǔn)備就緒之前觸發(fā)，這可能會(huì)導(dǎo)致不良結(jié)果（請(qǐng)?jiān)诋惒絁avaScript上閱讀以了解更多信息）。
步驟2：載入資料
我將使用來自《世界幸福報(bào)告》的數(shù)據(jù)，該數(shù)據(jù)是一項(xiàng)全球調(diào)查得出的結(jié)果，該調(diào)查試圖將每個(gè)國家公民的幸福量化為0到10之間的一個(gè)值。我從Kaggle獲得了此數(shù)據(jù)，這是一個(gè)尋找樂趣的好地方和有趣的數(shù)據(jù)集。誠然，它們中的大多數(shù)都是針對(duì)機(jī)器學(xué)習(xí)應(yīng)用程序的，但有一些可以很好地用于數(shù)據(jù)可視化。
在準(zhǔn)備繪制箱形圖時(shí)，我需要以我們選擇的制圖庫可接受的格式和形式提供數(shù)據(jù)。例如，AnyChart JS接受以下格式的箱形圖數(shù)據(jù)：
{x:"Name", low: value, q1: value, median: value, q3: value, high: value, outliers: array}
其中x是標(biāo)簽，q1和q3是第一個(gè)和第三個(gè)四分位數(shù)，低和高分別是q1之下的1.5 x四分位數(shù)范圍和q3之上的1.5 x四分位數(shù)范圍，離群值是包含所有離群值的數(shù)組。
我已經(jīng)方便地對(duì)世界幸福報(bào)告中的數(shù)據(jù)進(jìn)行了預(yù)處理，以產(chǎn)生以下數(shù)組：
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();
將所有這些放在一起，您將獲得以下內(nèi)容：
<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>
結(jié)果是：
通過這些簡單的步驟，我快速制作了一個(gè)功能非常強(qiáng)大的交互式盒須圖，現(xiàn)在可以輕松地將其嵌入任何網(wǎng)站或應(yīng)用程序中！
雖然還不錯(cuò)，但我認(rèn)為我可以做得更好,繼續(xù)閱讀。
步驟4：自定義盒須圖
數(shù)據(jù)可視化不僅僅是處理一些數(shù)據(jù)并將其放入圖表中。這是講故事的。這是為了進(jìn)行調(diào)整以突出顯示見解或使可視化效果更引人入勝。
所有體面的圖表庫都將提供許多方法來實(shí)現(xiàn)此目的。他們將通過其API提供此選項(xiàng)，您通常可以通過閱讀其文檔來找到這些選項(xiàng)。在此示例中，當(dāng)我使用AnyChart JS圖表庫時(shí)，我將介紹一些可用于箱形圖的自定義選項(xiàng)。
定制圖表設(shè)計(jì)
可以更改可視化的許多外觀和功能方面。首先，我將添加一個(gè)自定義標(biāo)題，更改各個(gè)軸標(biāo)簽，并錯(cuò)開x軸標(biāo)簽以防止它們重疊：
// 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);
例如，對(duì)于框本身，我可以更改其默認(rèn)狀態(tài)，懸停時(shí)的狀態(tài)以及選中狀態(tài)的詳細(xì)信息。我可以對(duì)中線，莖干，晶須以及離群值進(jìn)行類似的更改。通常，我會(huì)利用這些自定義選項(xiàng)來使我的可視化效果更好地適應(yīng)我將要托管的位置的布局/主題，或者更好地適合顯示的數(shù)據(jù)（例如，在可視化環(huán)境數(shù)據(jù)時(shí)使用綠色）。
對(duì)于離群值，我什至可以通過設(shè)置標(biāo)記類型來更改形狀。（AnyChart有各種選項(xiàng)，可以在API參考中看到）。
使用以下代碼可以輕松進(jìn)行這些更改：
// 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);
在這里，我分別輸入顏色和不透明度以及填充和筆觸的顏色和寬度。顏色參數(shù)可以多種接受的格式給出。在這里，我介紹了使用更廣泛的十六進(jìn)制代碼。
結(jié)合所有這些結(jié)果可得出：
改善箱形圖工具提示
您可能已經(jīng)注意到，將鼠標(biāo)懸停在一個(gè)框上時(shí)，您會(huì)看到用于繪制這些圖的所有匯總統(tǒng)計(jì)信息……但異常值除外。我將解決此問題，并將異常數(shù)據(jù)也添加到箱形圖工具提示中。
// 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}");
并且，如果將其添加到先前的代碼中，則會(huì)得到以下交互式箱須圖：
我們只是將幸福形象化（分類）！從上面的情節(jié)中，我可以清楚地看到撒哈拉以南非洲不是最幸福的地方，而西歐人和北美人笑到最幸福的地方顯然是澳大利亞和新西蘭！
結(jié)論
如您所見，進(jìn)行交互式數(shù)據(jù)可視化非常容易。它不需要太多的JavaScript知識(shí)即可上手（取決于您使用的圖表庫），并且效果很好！在這里，我創(chuàng)建了一個(gè)箱形圖，但是其他圖表類型的過程非常相似，并且通過查閱文檔可以很容易地進(jìn)行更改。
無論是更有趣的自定義設(shè)置還是使用不同的數(shù)據(jù)源，這只是冰山一角。我希望本箱圖和晶須圖教程可以成為進(jìn)一步學(xué)習(xí)的理想跳板！
相關(guān)產(chǎn)品推薦：
AnyGantt——構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營 
11次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線