AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實時更新，多層次向下鉆區(qū)和具體參數(shù)更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。
點擊下載AnyChart最新版
維恩圖是一種形式的數(shù)據(jù)可視化，使用形狀，通常圓形，以顯示的東西組之間的關(guān)系。在此圖表類型中，重疊區(qū)域顯示共同點，而不重疊的圓圈顯示不共享的特征。
由英國數(shù)學(xué)家，邏輯學(xué)家和哲學(xué)家John Venn引入的 Venn圖也稱為集合圖或邏輯圖，因為它們顯示了不同集合元素之間可能的邏輯關(guān)系。繪制此類圖表時，我們很可能會處理兩個或三個重疊的圓圈，因為只有一個圓圈會很無聊，而很快擁有四個或更多個圓圈會變得非常復(fù)雜。
這些圖不僅是一個很好的可視化概念，而且還提供了一個很好的機會來表示定性數(shù)據(jù)和一些圖形幽默?；旧?，它們易于構(gòu)建和使用。我馬上告訴你！
閱讀本教程，了解如何在JavaScript的幫助下輕松為您的網(wǎng)站或應(yīng)用創(chuàng)建視覺上吸引人且內(nèi)容豐富的維恩圖。本教程中使用和演示的所有代碼都可以免費使用。
在持續(xù)的冠狀病毒疫情期間，在家中工作并避免在外面進食，我們中的許多人已成為業(yè)余廚師。因此，讓我們使用基于JS的Venn圖來找出 哪種配方最適合在工作日內(nèi)嘗試—這將是一個令人愉悅的用例！
維恩圖將被開發(fā)
在開始之前，我決定激發(fā)您的興趣，以提供出色的數(shù)據(jù)可視化和學(xué)習(xí)經(jīng)驗，并向您展示最終的交互式JavaScript Venn圖的外觀。
基本JS Venn圖的4個簡單步驟
維恩圖是可視化人員和觀眾的一種享受，它們提供了巨大的價值和快速的洞察力，同時易于制作和理解。
讓我們看看如何使用JavaScript（HTML5）制作維恩圖。這可能不像使用不同顏色的素描筆在餐巾紙上創(chuàng)建圓圈那樣簡單（也許可以比較狗和貓?。?。
實際上，您應(yīng)該按照以下4個步驟來構(gòu)建幾乎任何形式的漂亮JavaScript圖表，包括維恩圖：
-
為圖表創(chuàng)建一個HTML頁面。
-
包括必要的JavaScript文件。
-
添加數(shù)據(jù)。
-
為該圖編寫JS代碼。
1.創(chuàng)建一個HTML頁面
創(chuàng)建一個具有塊級元素的基本HTML頁面，在該頁面上將渲染維恩圖。該div元素將保存圖表，并為其指定一個唯一的ID，以供以后參考。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
容器的寬度和高度設(shè)置為100％，以便圖表填充整個屏幕。您可以根據(jù)需要設(shè)置其他值以更改圖形的大小。
2.包含必要的JavaScript文件
要創(chuàng)建JavaScript圖表，必須鏈接將用于開發(fā)它的適當(dāng)?shù)?JS腳本。這些文件必須包含在HTML頁面部分的<script>標(biāo)記內(nèi)<head>。
可以隨意選擇用于數(shù)據(jù)可視化的JS庫，因為那里有很多庫，而且這種方法非常通用。在本教程中，我將使用 AnyChart。它是一個靈活而強大的JavaScript圖表庫，它使在健壯的圖中可視化數(shù)據(jù)變得相當(dāng)容易和快捷，因此即使是初學(xué)者也可以。對于維恩圖，我們只需要所有圖表都需要的核心庫模塊，以及用于創(chuàng)建此特定圖表類型的專用模塊。
您可以下載所需的腳本并將其添加到HTML頁面，或包括CDN鏈接（為簡便起見，此處我們將這樣做）。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</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-venn.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>
<script>
// All the code for the chart will come here
</script>
</body>
</html>
注意：我們在主體中添加了一個腳本標(biāo)記，將在其中編寫用于創(chuàng)建圖表的代碼。
3.添加數(shù)據(jù)
數(shù)據(jù)是構(gòu)成圖表的要素，因此，它是可視化的重要方面。AnyChart的一大優(yōu)點是它提供了多種添加數(shù)據(jù)的方法。在此維恩圖中，我們使用的是簡單數(shù)據(jù)，因此我們可以將數(shù)據(jù)直接包含到頁面中。
每個圖表都以特定的形式呈現(xiàn)數(shù)據(jù)，因此，重要的是確保以對維恩圖有意義的方式獲取數(shù)據(jù)。這是非常直觀的，因此無需擔(dān)心。
我們的數(shù)據(jù)是關(guān)于在家工作期間選擇食譜進行嘗試時考慮的三個方面的信息。完美的配方是具有所有三個有利特性的配方。
我們列出了考慮的3個屬性作為3個數(shù)據(jù)點以及2個組合的交點以及所有3個其他單獨的數(shù)據(jù)點。
維恩圖接受數(shù)據(jù)數(shù)組，因此我們同樣地構(gòu)造數(shù)據(jù)。
data = [
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made'
},
{
x: 'B',
value: 100,
name: 'INGREDIENTS \n Key elements available'
},
{
x: 'C',
value: 100,
name: 'COMPLEXITY \n Manageable level'
},
{
x: ['A', 'C'],
value: 25,
name: 'Add to \n wishlist'
},
{
x: ['A', 'B'],
value: 25,
name: 'Possibility \n of disaster'
},
{
x: ['B', 'C'],
value: 25,
name: 'Try on a \n holiday'
},
{
x: ['A', 'B', 'C'],
value: 25,
name: 'The perfect \n recipe'
}
]
給數(shù)據(jù)點一個值，以指示重疊和不重疊的數(shù)量。由于我們的數(shù)據(jù)是定性的，因此我們給每個重疊部分都賦予相同的值。該名稱指示每個數(shù)據(jù)點的描述。\n在描述中看到的符號是換行符，插入換行符。
4.編寫維恩圖的JS代碼
現(xiàn)在一切就緒，僅需幾行代碼，我們就可以準(zhǔn)備基本的Venn圖。
所有JavaScript代碼都放置在<script>HTML頁面正文的標(biāo)記內(nèi)。我們要做的第一件事是添加一個包含所有代碼的函數(shù)，以確保代碼僅在頁面準(zhǔn)備好后才能執(zhí)行。
<script type="text/javascript">
anychart.onDocumentReady(function() {
// All the code for drawing the chart will come here
});
</script>
接下來，我們添加數(shù)據(jù)并使用該數(shù)據(jù)創(chuàng)建圖表。然后，我們將容器設(shè)置為引用先前添加的HTML元素并繪制圖表。
anychart.onDocumentReady(function () {
var data = [{data}];
// create venn diagram
var chart = anychart.venn(data);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
}
我們繪制了維恩圖，但是我們僅添加了兩行代碼以給該圖一個標(biāo)題，并設(shè)置標(biāo)簽格式以表示相交的數(shù)據(jù)文本而不是值，因為這對我們的主觀數(shù)據(jù)更有意義。
// set chart title
chart.title('The perfect recipe to try while working from home');
// set labels settings
chart.labels().format('{%Name}');
自定義維恩圖（使其更加出色）
AnyChart庫提供了許多選項來調(diào)整數(shù)據(jù)可視化的外觀。無論您做什么，總有改進的余地，我們可以肯定地更改JS Venn圖中的一些內(nèi)容，以使其更具吸引力，突出顯示某些要點，添加功能以更好地理解數(shù)據(jù)，或者只是改善外觀以適合我們的味道！
更改數(shù)據(jù)外觀的最簡單方法是嘗試AnyChart提供的各種顏色主題。只需將所需主題添加到頁面頂部，然后在代碼中引用它即可完成。
<script src="http://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>
// set chart theme
anychart.theme('pastel');
讓我們看一下本教程中的其他一些快速修改：
-
總體圖表外觀有所改善。
-
每個數(shù)據(jù)點的自定義顏色。
-
字體更改。
-
特殊效果。
1.總體外觀改善
我們將在此處和此處進行一些小的更改，以完善維恩圖的可視化效果。再次，您將看到進行這些更改有多么容易。
由于我們的維恩圖在圖表上顯示了數(shù)據(jù)點文本，因此我們實際上不需要圖例。
// disable legend
chart.legend(false);
然后，讓我們向圓圈添加筆觸，使相交區(qū)域突出。
// set chart stroke
chart.stroke('1 #fff');
并修改文本的大小，樣式和位置，以增強標(biāo)題和標(biāo)簽。
// set chart title
chart
.title()
.enabled(true)
.fontSize(24)
.padding({ bottom: 25 })
.text("The perfect recipe to try while working from home");
// set labels settings
chart
.labels()
.fontSize(14)
.fontColor("#5e6469")
.hAlign("center")
.vAlign("center")
.fontWeight("500")
.format("{%Name}");
// set intersections labels settings
chart
.intersections()
.labels()
.fontStyle("italic")
.fontColor("#fff")
.format("{%Name}");
2.每個數(shù)據(jù)點的自定義顏色
當(dāng)我們希望為每個數(shù)據(jù)點使用不同的顏色時，最好的方法是將color屬性添加到數(shù)據(jù)中。在AnyChart中，我們不僅可以指定每個區(qū)域的顏色，還可以在懸停和選擇這些區(qū)域時指定顏色。
讓我們向數(shù)據(jù)中添加正常，懸停和選定的屬性，并指定填充顏色和不透明度。
這是數(shù)據(jù)點A的示例：
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made',
normal: {fill: "#8ecafb 0.7"},
hovered: {fill: "#8ecafb 1"},
selected: {fill: "#8ecafb 1"}
}
3.字體變更
我們可以使用現(xiàn)有字體，也可以按照此處的方式添加Google字體。我們只需在頁面頂部鏈接我們要使用的Google字體的樣式表，然后在想要將其應(yīng)用于任何位置的情況下指定該字體系列。
<link rel="stylesheet">
// add this in the code
.fontFamily('Roboto, sans-serif')
4.一些特效
為了給我們的JavaScript Venn圖增添趣味，讓我們在相交區(qū)域中添加紋理填充，并在圖表工具提示中添加一些有趣的文本。
由于工具提示文本和紋理填充顏色將特定于每個數(shù)據(jù)點，因此我們將其包含在數(shù)據(jù)中。
這是一個交點數(shù)據(jù)點的示例：
{
x: ['A', 'C'],
value: 20,
name: 'Add to\n wishlist',
tooltipTitle: 'Add to wishlist',
tooltipDesc: 'Add the ingredients in the next shopping list',
normal: {fill: "#a98caf 0.6"},
hovered : {fill: "#a98caf 1"},
selected: {fill: "#a98caf 1"},
hatchFill:{
type:"weave",
color: "#8b6b92"
}
}
在代碼中包含此更改：
// set tooltip settings
chart.tooltip()
.titleFormat('{%tooltipTitle}')
.format("{%tooltipDesc}")
.background().fill("#000 0.5");
查看所有這些自定義的最終交互式JavaScript基于Venn圖！為了您的方便，其完整代碼位于嵌入式交互式圖形的下方。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</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-venn.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>
<link rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('pastel');
var data = [
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made',
tooltipTitle: 'TIME \n Can be quickly made',
normal: {fill: "#8ecafb 0.7"},
hovered: {fill: "#8ecafb 1"},
selected: {fill: "#8ecafb 1"}
},
{
x: 'B',
value: 100,
name: 'INGREDIENTS \n Key elements available',
tooltipTitle: 'INGREDIENTS \n Key elements available',
normal: {fill: "#ffeaa6 0.7"},
hovered: {fill: "#ffeaa6 1"},
selected: {fill: "#ffeaa6 1"}
},
{
x: 'C',
value: 100,
name: 'COMPLEXITY \n Manageable level',
tooltipTitle: 'COMPLEXITY \n Manageable level',
normal: {fill: "#ee957f 0.7"},
hovered: {fill: "#ee957f 1"},
selected: {fill: "#ee957f 1"}
},
{
x: ['A', 'C'],
value: 20,
name: 'Add to \n wishlist',
tooltipTitle: 'Add to wishlist',
tooltipDesc: 'Add the ingredients in the next shopping list',
normal: {fill: "#a98caf 0.6"},
hovered: {fill: "#a98caf 1"},
selected: {fill: "#a98caf 1"},
hatchFill: {
type:"weave",
color: "#8b6b92"
}
},
{
x: ['A', 'B'],
value: 20,
name: 'Possibility \n of disaster',
tooltipTitle: 'Possibility of disaster',
tooltipDesc: 'Keep a backup ready',
normal: {fill: "#9fdebe 0.8"},
hovered: {fill: "#9fdebe 1"},
selected: {fill: "#9fdebe 1"},
hatchFill: {
type:"weave",
color: "#83c3a3"
}
},
{
x: ['B', 'C'],
value: 20,
name: 'Try on a \n holiday',
tooltipTitle: 'Try on a holiday',
tooltipDesc: 'When there is no other work pending',
normal: {fill: "#f5b57c 0.8"},
hovered: {fill: "#f5b57c 1"},
selected: {fill: "#f5b57c 1"},
hatchFill: {
type:"weave",
color: "#d09259"
}
},
{
x: ['A', 'B', 'C'],
value: 30,
name: 'The Perfect \n Recipe',
tooltipTitle: 'The Perfect Recipe',
tooltipDesc: 'Easy to follow and fast to cook with whatever is in the kitchen',
label: {enabled:true, fontStyle: 'normal'},
normal: {fill: "#8392ab 0.9"},
hovered: {fill: "#8392ab 1"},
selected: {fill: "#8392ab 1"},
hatchFill: {
type:"percent40",
color: "#5f6b7d"
}
}
];
// create venn diagram
var chart = anychart.venn(data);
// set chart title
chart
.title()
.enabled(true)
.fontFamily('Roboto, sans-serif')
.fontSize(24)
.padding({ bottom: 30 })
.text('The Perfect Recipe to try while working from home');
// set chart stroke
chart.stroke('1 #fff');
// set labels settings
chart
.labels()
.fontSize(16)
.fontColor('#5e6469')
.hAlign("center")
.vAlign("center")
.fontFamily('Roboto, sans-serif')
.fontWeight('500')
.format('{%Name}');
// set intersections labels settings
chart
.intersections()
.labels()
.fontStyle('italic')
.fontColor('#fff')
.format('{%Name}');
// disable legend
chart.legend(false);
// set tooltip settings
chart
.tooltip()
.titleFormat('{%tooltipTitle}')
.format("{%tooltipDesc}")
.background().fill("#000 0.5");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
請在Playground或CodePen上查看此定制的Venn圖以及完整的JS / CSS / HTML代碼。
結(jié)論
本教程將向您展示如何快速繪制維恩圖，并通過各種增強使其更具吸引力。您可以嘗試使用顏色，圖案和其他可能的自定義替代方案。要了解有關(guān)維恩圖作為圖表類型的更多信息，請參閱其在Chartopedia上的配置文件。
一些HTML和JavaScript的實用知識總是很有幫助的。但是，正如我們所看到的那樣，使用具有預(yù)建圖表類型和現(xiàn)成功能的健壯JavaScript圖表庫創(chuàng)建可視化文件非常簡單，以至于即使沒有任何技術(shù)知識，也可以輕松制作有用且美觀的交互式圖表。此外，關(guān)于AnyChart的特別之處在于，它擁有大量的文檔 和其他資源來幫助您輕松創(chuàng)建和自定義可視化效果。
我們在AnyChart很高興感謝經(jīng)驗豐富的數(shù)據(jù)設(shè)計師Shachee Swadia創(chuàng)建了這個出色的教程。
要繼續(xù)學(xué)習(xí)和練習(xí)數(shù)據(jù)可視化，請查看其他JavaScript圖表教程,并查看可以構(gòu)建的圖表的完整列表以及可以與AnyChart一起使用的主要功能。然后，以快速，輕松的方式創(chuàng)建令人驚嘆的可視化效果。
相關(guān)產(chǎn)品推薦：
AnyGantt——構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買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號
客服熱線