圖表控件如何使用JavaScript建立維恩圖

時間  2020-12-01
標籤 javascript css html java api 數組 瀏覽器 ide 函數 工具 欄目 JavaScript 简体版
原文   原文鏈接

AnyChart是基於JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可建立跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被不少知名大公司所使用，可用於儀表盤、報表、數據分析、統計學、金融等領域。javascript

AnyChar HTML5圖表高度可定製且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鑽區和具體參數更新。強大的主題引擎使你經過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。css

慧都網免費點擊下載AnyChart最新版html

圖表控件如何使用JavaScript建立維恩圖

維恩圖是一種形式的數據可視化，使用形狀，一般圓形，以顯示的東西組之間的關係。在此圖表類型中，重疊區域顯示共同點，而不重疊的圓圈顯示不共享的特徵。java

由英國數學家，邏輯學家和哲學家John Venn引入的 Venn圖也稱爲集合圖或邏輯圖，由於它們顯示了不一樣集合元素之間可能的邏輯關係。繪製此類圖表時，咱們極可能會處理兩個或三個重疊的圓圈，由於只有一個圓圈會很無聊，而很快擁有四個或更多個圓圈會變得很是複雜。api

這些圖不只是一個很好的可視化概念，並且還提供了一個很好的機會來表示定性數據和一些圖形幽默。基本上，它們易於構建和使用。我立刻告訴你！數組

閱讀本教程，瞭解如何在JavaScript的幫助下輕鬆爲您的網站或應用建立視覺上吸引人且內容豐富的維恩圖。本教程中使用和演示的全部代碼均可以避免費使用。瀏覽器

在持續的冠狀病毒疫情期間，在家中工做並避免在外面進食，咱們中的許多人已成爲業餘廚師。所以，讓咱們使用基於JS的Venn圖來找出 哪一種配方最適合在工做日內嘗試—這將是一個使人愉悅的用例！ide

維恩圖將被開發

在開始以前，我決定激發您的興趣，以提供出色的數據可視化和學習經驗，並向您展現最終的交互式JavaScript Venn圖的外觀。
圖表控件如何使用JavaScript建立維恩圖函數

基本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="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>;
<script src="https://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="https://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 href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" 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="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>;
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-venn.min.js"></script>;
<script src="https://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>;
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" 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正版受權，或瞭解更多產品信息請點擊【諮詢在線客服】本文章轉載自【慧都科技】evget歡迎任何形式的轉載，但請務必註明出處、不得修改原文相關連接，尊重他人勞動成果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程