本文介绍了如何使用AnyChart JavaScript库创建维恩图，详细讲解了从创建HTML页面、包含必要文件、添加数据到编写JS代码的步骤，并展示了如何自定义图表的外观、颜色、字体和特效，提供了一个在工作日烹饪食谱选择中的维恩图用例。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。
AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。
维恩图是一种形式的数据可视化，使用形状，通常圆形，以显示的东西组之间的关系。在此图表类型中，重叠区域显示共同点，而不重叠的圆圈显示不共享的特征。
由英国数学家，逻辑学家和哲学家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页面部分的
可以随意选择用于数据可视化的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'
最低0.47元/天 解锁文章
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
