AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。
點擊下載AnyChart正式版
使用JavaScript為HTML5應(yīng)用程序和網(wǎng)站創(chuàng)建Pareto圖表根本不是一個復(fù)雜或忙碌的開發(fā)過程。獲得本教程的動手經(jīng)驗，您會發(fā)現(xiàn) 數(shù)據(jù)可視化以一種令人興奮和激動的形式！
在開始之前，讓我們記住 帕累托圖的 外觀及其目的是什么，只是確保我們在同一頁面上。帕累托圖（也稱為帕累托圖）是豎線（列）和折線圖的組合。列用于描述值，并按從左到右的降序顯示。帕累托圖表中的線顯示了百分比的累計總數(shù)。這樣的可視化幫助數(shù)據(jù)科學(xué)家和分析人員快速識別出一系列因素中最重要的因素，即那些具有最大價值的因素，因此在所有表示的因素中對總和做出了最重要的貢獻。
在此JS Pareto圖表教程中，我們將可視化2019年美國主要死亡原因的統(tǒng)計數(shù)據(jù)，并根據(jù)官方數(shù)據(jù)找出當(dāng)年造成美國人死亡人數(shù)最多的原因。
現(xiàn)在讓我們轉(zhuǎn)向JavaScript圖表，更準(zhǔn)確地說，就是使用JS構(gòu)建交互式帕累托圖表！
（下面是您感興趣的基于JavaScript的最終Pareto圖表的外觀。）
建立基本的JS帕累托圖
在JavaScript圖表中可視化數(shù)據(jù)的常見順序基于以下四個步驟。要創(chuàng)建JS Pareto圖表，您也應(yīng)該遵循它們：
-
首先，生成帶有容器的HTML以顯示圖表。
-
其次，引用您將要使用的所有JS腳本。
-
第三，加載需要繪制圖表的數(shù)據(jù)。
-
第四，編寫可視化圖表所需的JavaScript代碼。
讓我們完成所有這些步驟，以制作交互式帕累托圖，并了解整個過程，總體上來說非常簡單。
步驟1：建立HTML網(wǎng)頁
以下代碼設(shè)置了一個帶有容器的HTML頁面，以容納我們的帕累托圖。
<!DOCTYPE html>
<html>
<head>
<title>Pareto Chart Example</title>
<style>
html, body, #container1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container1"></div>
// The Pareto chart code will be put here.
</body>
</html>
上面開發(fā)的HTML頁面包括兩個主要部分： <head>和 <;body>。本<head>節(jié)包括兩個小節(jié)：<title>和<style>。頁面標(biāo)題在此處設(shè)置為“帕累托圖示例”。該 <style>元素用于將簡單的樣式表應(yīng)用于HTML文檔，該<body>部分以及<div>ID為'container1'的容器（這是我們放置Pareto圖表的位置）。
步驟2：連接腳本
然后，在本<head>節(jié)中，我們應(yīng)該鏈接構(gòu)建帕累托圖時要使用的所有腳本。
您可以選擇使用許多JavaScript圖表庫來為您的網(wǎng)站或應(yīng)用程序創(chuàng)建交互式帕累托圖。在本教程中，我將使用AnyChart。這是一個非常靈活的JavaScript庫，用于跨平臺的數(shù)據(jù)可視化，并提供了大量的圖表演示以及大量且極為詳細的文檔和API參考， 從而即使是初學(xué)者也可以輕松地對其進行Web開發(fā)和編程。
AnyChart具有模塊化系統(tǒng)，該系統(tǒng)可讓您最大程度地減少需要在頁面上運行的JavaScript的數(shù)量，因為您不需要加載超過實際需要的內(nèi)容。要開發(fā)帕累托圖，您僅需要兩個模塊：具有所有JS圖表庫基礎(chǔ)知識的“核心”模塊和具有帕累托圖類型的“ pareto”模塊。
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>
現(xiàn)在，讓我們將這些模塊添加到該<head> 部分，如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Pareto Chart Example</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>
<style>
html, body, #container1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container1"></div>
<script>
// The Pareto chart code will be put here.
</script>
</body>
</html>
步驟3：加載您要可視化的數(shù)據(jù)
對于此JavaScript Pareto圖表教程，我決定采用CDC的統(tǒng)計數(shù)據(jù)， 揭示2019年美國十大主要死因。據(jù)報告，共有2854,838名居民死亡。十大主要死因占所有死亡的73.4％。帕累托圖將按降序顯示十個主要死因，以及每個死因?qū)λ劳隹倲?shù)的貢獻。
因此，讓我們首先來看數(shù)據(jù)集。
使用AnyChart的JS Pareto圖表模塊，您可以簡單地以JavaScript對象的形式設(shè)置和饋送數(shù)據(jù)集（如下所示）。該庫將處理構(gòu)建帕累托圖所需的其余工作，例如對因子頻率進行排序，將最頻繁的因子設(shè)置在左側(cè)，將最低的因子設(shè)置在右側(cè)，自動計算累積百分比等。
要使用我們的數(shù)據(jù)生成一個JavaScript對象，我們需要根據(jù)以下兩個數(shù)據(jù)字段分別命名為“ x”和“ value”：
-
“ x”是需要在帕累托圖中顯示的因子的名稱（在我們的情況下，是死因的名稱）
-
"價值”是相應(yīng)因素的發(fā)生頻率（在我們的案例中，是該原因?qū)е碌乃劳鋈藬?shù)）
這就是我們的數(shù)據(jù)的外觀：
var data = [
{x: 'Heart disease', value: 659041},
{x: 'Alzheimer disease', value: 150005},
{x: 'Cancer', value: 599601},
{x: 'Accidents', value: 173040},
{x: 'Kidney disease', value: 51567},
{x: 'Suicide', value: 47511},
{x: 'CLRD', value: 156979},
{x: 'Stroke', value: 121499},
{x: 'Diabetes', value: 87647},
{x: 'Influenza and pneumonia', value: 49783}
];
步驟4：編寫JS Pareto圖表代碼
到目前為止，我們已經(jīng)掌握了使用JavaScript生成交互式帕累托圖的所有基本知識。因此，讓我們整理實現(xiàn)目標(biāo)所需的所有其他信息。
所有JavaScript代碼都應(yīng)放在<script> 標(biāo)記內(nèi)。此外，如以下代碼片段所示，我們在onDocumentReady函數(shù)內(nèi)編寫了與JS代碼的帕累托圖相關(guān)的行。此功能將等待，直到HTML頁面完全加載為止。
<script>
anychart.onDocumentReady(function() {
// The entire code of the Pareto chart will be here.
});
</script>
因此，在onDocumentReady函數(shù)中，按照步驟3中的說明加載數(shù)據(jù)。
創(chuàng)建數(shù)據(jù)對象后，將其饋入帕累托圖。
// create a pareto chart
var chart = anychart.pareto();
// feed the data into the chart
chart.data(data);
然后，設(shè)置主帕累托圖標(biāo)題，并添加兩個Y軸標(biāo)題，如下所示，以弄清位置是什么：
// set the chart title
chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
// set the measure y axis title
chart.yAxis(0).title('Number of deaths');
// set the cumulative percentage y axis title
chart.yAxis(1).title('Cumulative percentage');
最后的操作是將生成的帕累托圖饋送到ID為“ container1”的部門，并根據(jù)給定的配置提供繪制圖形的命令：
// set the chart container id
chart.container('container1');
// draw the chart
chart.draw();
哇！這就是我們用JavaScript創(chuàng)建的帕累托圖最后的樣子。它是交互式的，響應(yīng)迅速！（請參閱AnyChart Playground上的此基本Pareto圖表。）
交互式JS / HTML5 Pareto圖表的完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Pareto Chart Example</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-pareto.min.js"></script>
<style>
html, body, #container1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
anychart.onDocumentReady(function () {
// set data
var data = [
{x: 'Heart disease', value: 659041},
{x: 'Alzheimer disease', value: 150005},
{x: 'Cancer', value: 599601},
{x: 'Accidents', value: 173040},
{x: 'Kidney disease', value: 51567},
{x: 'Suicide', value: 47511},
{x: 'CLRD', value: 156979},
{x: 'Stroke', value: 121499},
{x: 'Diabetes', value: 87647},
{x: 'Influenza and pneumonia', value: 49783}
];
// create a pareto chart
var chart = anychart.pareto();
// feed the data into the chart
chart.data(data);
// set the chart title
chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');
// set the measure y axis title
chart.yAxis(0).title('Number of deaths');
// set the cumulative percentage y axis title
chart.yAxis(1).title('Cumulative percentage');
// set the chart container id
chart.container('container1');
// draw the chart
chart.draw();
});
</script>
</body>
</html>
自定義JavaScript帕累托圖
您是否需要使圖表更方便，更美觀，更易讀或?qū)⑵渑c其他詳細信息一起包裝？在AnyChart JS API的幫助下，您有很多選擇可以做到這一點。您也可以對帕累托圖執(zhí)行許多視覺設(shè)計和功能更改。（有關(guān)更多詳細信息，請參閱帕累托圖文檔。）
要獲得更多啟發(fā)，可以查看帶有Pareto圖表示例的AnyChart畫廊。
現(xiàn)在，讓我們對基于JS的Pareto圖表進行一些改進，使其看起來更加出色–然后關(guān)注我！
使用調(diào)色板更改帕累托圖顏色
您是否要根據(jù)自己的喜好更改帕累托圖的默認(rèn)淺藍色？如果是這樣，那么有一種非常方便的方法– 自動著色的調(diào)色板！
AnyChart JS圖表庫中提供了許多預(yù)定義的調(diào)色板，并且使用它們真的很簡單。例如，應(yīng)用一個稱為Earth的地球：
// use one of the pre-built palettes for coloring
chart.palette(anychart.palettes.earth);
下面是新著色的帕累托圖。（在AnyChart Playground上查看。）
大地色調(diào)的顏色柔和自然，所以我喜歡它。使自己選擇的家伙。或根據(jù)需要從頭開始創(chuàng)建自定義調(diào)色板。
格式化帕累托的列和行系列
帕累托圖由列和線組成，它們是單獨的系列，具有自己的視覺設(shè)置。 讓我們對數(shù)據(jù)可視化的外觀進行一些設(shè)計更改。
我們可以使用不同的內(nèi)置方法來更改數(shù)據(jù)點的外觀。基本上有三種狀態(tài)：正常，懸停和已選擇。該normal()方法用于將點的外觀設(shè)置為正常狀態(tài)，即在對點不執(zhí)行任何操作時。該hovered()方法旨在確定懸停狀態(tài)下的外觀，即當(dāng)我們懸停在一個點上時的外觀。最后，該 selected()方法控制點被單擊（選定）時的外觀。
這三種方法可以與組合fill()，hatchFill()和stroke()方法。該fill()方法用于用給定的顏色填充點。該hatchFill()方法是用條紋圖案填充點。最后，stroke()是更改點輪廓的外觀。
讓我們首先更改帕累托專欄系列的所有內(nèi)容：
// configure the visual settings of the first (column) series
chart.getSeries(0).normal().fill("#c98411", 0.3);
chart.getSeries(0).hovered().fill("#c98411", 0.1);
chart.getSeries(0).selected().fill("#c98411", 0.5);
chart.getSeries(0).normal().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).hovered().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).selected().hatchFill("forward-diagonal", "#c98411", 1, 15);
chart.getSeries(0).normal().stroke("#c98411");
chart.getSeries(0).hovered().stroke("#c98411", 2);
chart.getSeries(0).selected().stroke("#c98411", 4);
接下來，讓我們自定義線系列：
// configure the visual settings of the second (line) series
chart.getSeries(1).normal().stroke("#991e00", 4, "4 4", "round");
上面的代碼在正常狀態(tài)下更改了線系列的輪廓。
具有這些新更改的交互式帕累托圖顯示在下面。現(xiàn)在，可視化效果是否看起來更加有趣？（在AnyChart Playground上查看。）
配置帕累托圖工具提示
您知道工具提示的目的是什么？當(dāng)您將鼠標(biāo)懸停在圖表可視化上的某個點上時，它們就會顯示出來，以提供有關(guān)相應(yīng)點的更多信息。
現(xiàn)在，讓我們使用帕累托圖的工具提示進行更多工作。默認(rèn)情況下，它顯示系列，行（累積百分比）和列（絕對數(shù)字）的值。讓我們把它們看起來都更整潔，還包括相對百分比。
首先，我們訪問列系列并命令工具提示在實際值之前顯示文本“ Value：”。
// configure the pareto column series tooltip format
var column = chart.getSeriesAt(0);
column.tooltip().format('Value: {%Value}');
其次，我們訪問線系列，并在累積百分比之前添加文本“累積頻率：”，并以相同方式設(shè)置相對頻率值的顯示。'\ n'字符用于換行。
// configure the pareto line series tooltip format
var line = chart.getSeriesAt(1);
line
.tooltip()
.format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');
當(dāng)工具提示得到這樣的改進時，請查看我們的JavaScript Pareto圖表的外觀。（在AnyChart Playground上查看。）
設(shè)置帕累托圖標(biāo)簽
通過在每個數(shù)據(jù)點附近的線系列頂部顯示每個因素的累積百分比（在我們的情況下為死亡原因），可以一目了然地使帕累托圖更具信息性。看那個：
// set the pareto line series labels
var line = chart.getSeriesAt(1);
line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');
我會很快地解釋它。
可以使用chart.getSeriesAt(1)我們前面討論的方法來獲得帕累托圖的線系列。一旦獲得它，就啟用線系列對象的標(biāo)簽。為此， labels().enabled()需要設(shè)置方法，并以“ true”作為參數(shù)。
該anchor()功能用于設(shè)置標(biāo)簽的顯示位置。
最后，我們使用該format()方法來配置標(biāo)簽顯示格式。
下面是新的交互式JS Pareto圖表，現(xiàn)在帶有百分比信息標(biāo)簽。（在AnyChart Playground上查看。）
啟用帕累托圖十字準(zhǔn)線
十字準(zhǔn)線是跟隨鼠標(biāo)指針的彼此垂直的水平和垂直線。它們使您可以輕松查看任何數(shù)據(jù)點中的確切值。讓我們?yōu)榕晾弁袌D啟用這些功能：
// add and configure the crosshair
chart.crosshair().enabled(true).xLabel(false);
您可以看到該xLabel方法的參數(shù)設(shè)置為“ false”。因此，X軸上不會顯示十字線標(biāo)簽。
以下是帶有十字線的帕累托圖的外觀。（在AnyChart Playground上查看。）
這是本教程的最終交互式JavaScript Pareto圖表。看起來不錯。
讓我們看看在此帕累托圖上可以讀到的內(nèi)容。例如，該圖表非常清楚地表明，2019年美國人的絕大多數(shù)死亡是由于心臟病和癌癥所致–這兩種主要的死亡原因占前十名中的60％以上。
意外傷害導(dǎo)致173,040人死亡，成為第三大原因。
自殺案件顯示在圖表的最右角，這意味著在所有十個主要原因中，自殺案件所占的比重最小。盡管如此，這同時是可怕的，在未來幾年中，美國當(dāng)局和非政府組織絕對應(yīng)該解決這個問題。
結(jié)論
如何在JS的幫助下創(chuàng)建交互式帕累托圖？實際上，我們只需要創(chuàng)建一個基本的HTML頁面，引用必要的JavaScript腳本，加載數(shù)據(jù)集并根據(jù)文檔中明確的說明編寫一些代碼，具體取決于我們希望從這種數(shù)據(jù)可視化中獲得什么。AnyChart API基本上可以處理所有內(nèi)容，并且使所有內(nèi)容都變得撲朔迷離。
接下來，隨時在Pareto圖表上進行更多探索，并使用這些炫酷的可視化工具繼續(xù)學(xué)習(xí)。一切順利！
相關(guān)產(chǎn)品推薦：
AnyGantt-構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)排程可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準(zhǔn)時交貨能力，提高產(chǎn)能和資源利用率
想要購買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請點擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
14次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線