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