如何使用AnyGantt创建基本的Venn Diagram（维恩图）一

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

AnyGantt正式版

维恩图

总览
以John Venn命名的Venn图是表示不同集合的有限集合之间所有可能的逻辑关系的图。集合显示为圆或其他闭合曲线内的区域，集合的公共元素显示为这些圆的交点。

AnyChart Venn图表类型也可以用于创建欧拉图。以Leonhard Euler命名的Euler图与Venn图非常相似，但仅表示集合之间的相关关系。

<script src=”https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js”></script>

<script src=”https://cdn.anychart.com/releases/8.7.1/js/anychart-venn.min.js”></script>

快速开始

要创建维恩图，请使用anychart.venn（）图表构造函数，如以下示例所示：

//create datavar data = [    {x: "A", value: 100},    {x: "B", value: 100},    {x: ["A", "B"], value: 25}];// create a chart and set the datachart = anychart.venn(data);// configure labels of intersectionschart.intersections().labels().format("{%x}");// set the container idchart.container('container');// initiate drawing the chartchart.draw();

在AnyChart中，对于所有图表类型（包括维恩图），都以相同的方式配置了许多设置（例如，图例和交互设置）。

特殊设定

数据
Venn图的数据可以传递到图表构造函数anychart.venn（）或data（）方法。
创建数据时，应将以下数据字段用于圆和相交区域：

• x 设置唯一标识符
• value 设定尺寸
• name 设置名称

该name字段是可选的，并且元素名称与标识符不同，不需要唯一。默认情况下，圆的名称显示在标签，工具提示和图例中。但是，在相交的情况下，标签的默认选择是value。

下面的示例显示了两个设置了名称的圆圈：

//create datavar data = [    {    x: "A",    name: "Set A",    value: 400    },    {    x: "B",    name: "Set B",    value: 200    }];// create a chart and set the datachart = anychart.venn(data);

要设置相交的标识符（在其x字段中），请组合相交圆的标识符。您可以使用数组：

// create datavar data = [    {x: "A", value: 100},    {x: "B", value: 100},    {x: "C", value: 100},    {x: ["A", "B"], value: 20},    {x: ["B", "C"], value: 20},    {x: ["A", "B", "C"], value: 20}];

借助数据分隔符，还可以将圆的标识符设置为字符串。默认的分隔符是＆：

// create datavar data = [    {x: "A", value: 100},    {x: "B", value: 100},    {x: "C", value: 100},    {x: "A&B", value: 20},    {x: "A&C", value: 20},    {x: "B&C", value: 20},    {x: "A&B&C", value: 20}];

使用dataSeparator方法可以将其更改为所需的任何内容：

// create datavar data = [    {x: "A", value: 100},    {x: "B", value: 100},    {x: "C", value: 100},    {x: "A+B", value: 20},    {x: "A+C", value: 20},    {x: "B+C", value: 20},    {x: "A+B+C", value: 20}];// set the data separatorchart.dataSeparator("+");

APS是科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

想要购买AnyGantt正版授权或APS系统，或了解更多产品信息请点击【咨询在线客服】

标签：