图表控件如何使用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教程