AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。
點擊下載AnyChart最新版
維恩圖是一種形式的數據可視化，使用形狀，通常圓形，以顯示的東西組之間的關系。在此圖表類型中，重疊區域顯示共同點，而不重疊的圓圈顯示不共享的特征。
由英國數學家，邏輯學家和哲學家John Venn引入的 Venn圖也稱為集合圖或邏輯圖，因為它們顯示了不同集合元素之間可能的邏輯關系。繪制此類圖表時，我們很可能會處理兩個或三個重疊的圓圈，因為只有一個圓圈會很無聊，而很快擁有四個或更多個圓圈會變得非常復雜。
這些圖不僅是一個很好的可視化概念，而且還提供了一個很好的機會來表示定性數據和一些圖形幽默。基本上，它們易于構建和使用。我馬上告訴你！
閱讀本教程，了解如何在JavaScript的幫助下輕松為您的網站或應用創建視覺上吸引人且內容豐富的維恩圖。本教程中使用和演示的所有代碼都可以免費使用。
在持續的冠狀病毒疫情期間，在家中工作并避免在外面進食，我們中的許多人已成為業余廚師。因此，讓我們使用基于JS的Venn圖來找出 哪種配方最適合在工作日內嘗試—這將是一個令人愉悅的用例！
維恩圖將被開發
在開始之前，我決定激發您的興趣，以提供出色的數據可視化和學習經驗，并向您展示最終的交互式JavaScript Venn圖的外觀。
基本JS Venn圖的4個簡單步驟
維恩圖是可視化人員和觀眾的一種享受，它們提供了巨大的價值和快速的洞察力，同時易于制作和理解。
讓我們看看如何使用JavaScript（HTML5）制作維恩圖。這可能不像使用不同顏色的素描筆在餐巾紙上創建圓圈那樣簡單（也許可以比較狗和貓！）。
實際上，您應該按照以下4個步驟來構建幾乎任何形式的漂亮JavaScript圖表，包括維恩圖：
-
為圖表創建一個HTML頁面。
-
包括必要的JavaScript文件。
-
添加數據。
-
為該圖編寫JS代碼。
1.創建一個HTML頁面
創建一個具有塊級元素的基本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>
容器的寬度和高度設置為100％，以便圖表填充整個屏幕。您可以根據需要設置其他值以更改圖形的大小。
2.包含必要的JavaScript文件
要創建JavaScript圖表，必須鏈接將用于開發它的適當的JS腳本。這些文件必須包含在HTML頁面部分的<script>標記內<head>。
可以隨意選擇用于數據可視化的JS庫，因為那里有很多庫，而且這種方法非常通用。在本教程中，我將使用 AnyChart。它是一個靈活而強大的JavaScript圖表庫，它使在健壯的圖中可視化數據變得相當容易和快捷，因此即使是初學者也可以。對于維恩圖，我們只需要所有圖表都需要的核心庫模塊，以及用于創建此特定圖表類型的專用模塊。
您可以下載所需的腳本并將其添加到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>
注意：我們在主體中添加了一個腳本標記，將在其中編寫用于創建圖表的代碼。
3.添加數據
數據是構成圖表的要素，因此，它是可視化的重要方面。AnyChart的一大優點是它提供了多種添加數據的方法。在此維恩圖中，我們使用的是簡單數據，因此我們可以將數據直接包含到頁面中。
每個圖表都以特定的形式呈現數據，因此，重要的是確保以對維恩圖有意義的方式獲取數據。這是非常直觀的，因此無需擔心。
我們的數據是關于在家工作期間選擇食譜進行嘗試時考慮的三個方面的信息。完美的配方是具有所有三個有利特性的配方。
我們列出了考慮的3個屬性作為3個數據點以及2個組合的交點以及所有3個其他單獨的數據點。
維恩圖接受數據數組，因此我們同樣地構造數據。
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'
}
]
給數據點一個值，以指示重疊和不重疊的數量。由于我們的數據是定性的，因此我們給每個重疊部分都賦予相同的值。該名稱指示每個數據點的描述。\n在描述中看到的符號是換行符，插入換行符。
4.編寫維恩圖的JS代碼
現在一切就緒，僅需幾行代碼，我們就可以準備基本的Venn圖。
所有JavaScript代碼都放置在<script>HTML頁面正文的標記內。我們要做的第一件事是添加一個包含所有代碼的函數，以確保代碼僅在頁面準備好后才能執行。
<script type="text/javascript">
anychart.onDocumentReady(function() {
// All the code for drawing the chart will come here
});
</script>
接下來，我們添加數據并使用該數據創建圖表。然后，我們將容器設置為引用先前添加的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();
}
我們繪制了維恩圖，但是我們僅添加了兩行代碼以給該圖一個標題，并設置標簽格式以表示相交的數據文本而不是值，因為這對我們的主觀數據更有意義。
// set chart title
chart.title('The perfect recipe to try while working from home');
// set labels settings
chart.labels().format('{%Name}');
自定義維恩圖（使其更加出色）
AnyChart庫提供了許多選項來調整數據可視化的外觀。無論您做什么，總有改進的余地，我們可以肯定地更改JS Venn圖中的一些內容，以使其更具吸引力，突出顯示某些要點，添加功能以更好地理解數據，或者只是改善外觀以適合我們的味道！
更改數據外觀的最簡單方法是嘗試AnyChart提供的各種顏色主題。只需將所需主題添加到頁面頂部，然后在代碼中引用它即可完成。
<script src="http://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>
// set chart theme
anychart.theme('pastel');
讓我們看一下本教程中的其他一些快速修改：
-
總體圖表外觀有所改善。
-
每個數據點的自定義顏色。
-
字體更改。
-
特殊效果。
1.總體外觀改善
我們將在此處和此處進行一些小的更改，以完善維恩圖的可視化效果。再次，您將看到進行這些更改有多么容易。
由于我們的維恩圖在圖表上顯示了數據點文本，因此我們實際上不需要圖例。
// disable legend
chart.legend(false);
然后，讓我們向圓圈添加筆觸，使相交區域突出。
// set chart stroke
chart.stroke('1 #fff');
并修改文本的大小，樣式和位置，以增強標題和標簽。
// 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.每個數據點的自定義顏色
當我們希望為每個數據點使用不同的顏色時，最好的方法是將color屬性添加到數據中。在AnyChart中，我們不僅可以指定每個區域的顏色，還可以在懸停和選擇這些區域時指定顏色。
讓我們向數據中添加正常，懸停和選定的屬性，并指定填充顏色和不透明度。
這是數據點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.字體變更
我們可以使用現有字體，也可以按照此處的方式添加Google字體。我們只需在頁面頂部鏈接我們要使用的Google字體的樣式表，然后在想要將其應用于任何位置的情況下指定該字體系列。
<link rel="stylesheet">
// add this in the code
.fontFamily('Roboto, sans-serif')
4.一些特效
為了給我們的JavaScript Venn圖增添趣味，讓我們在相交區域中添加紋理填充，并在圖表工具提示中添加一些有趣的文本。
由于工具提示文本和紋理填充顏色將特定于每個數據點，因此我們將其包含在數據中。
這是一個交點數據點的示例：
{
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代碼。
結論
本教程將向您展示如何快速繪制維恩圖，并通過各種增強使其更具吸引力。您可以嘗試使用顏色，圖案和其他可能的自定義替代方案。要了解有關維恩圖作為圖表類型的更多信息，請參閱其在Chartopedia上的配置文件。
一些HTML和JavaScript的實用知識總是很有幫助的。但是，正如我們所看到的那樣，使用具有預建圖表類型和現成功能的健壯JavaScript圖表庫創建可視化文件非常簡單，以至于即使沒有任何技術知識，也可以輕松制作有用且美觀的交互式圖表。此外，關于AnyChart的特別之處在于，它擁有大量的文檔 和其他資源來幫助您輕松創建和自定義可視化效果。
我們在AnyChart很高興感謝經驗豐富的數據設計師Shachee Swadia創建了這個出色的教程。
要繼續學習和練習數據可視化，請查看其他JavaScript圖表教程,并查看可以構建的圖表的完整列表以及可以與AnyChart一起使用的主要功能。然后，以快速，輕松的方式創建令人驚嘆的可視化效果。
相關產品推薦：
AnyGantt——構建復雜且內容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
14次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線