如何使用AnyGantt创建基本的Venn Diagram（维恩图）一-控件新闻-慧都网

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

翻译|使用教程|编辑：杨鹏连|2020-08-31 09:54:57.463|阅读 375 次

概述：本文介绍了如何创建基本的维恩（或欧拉）图以及配置特定于该类型的设置。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

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

点击下载AnyGantt正式版

维恩图

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

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

本文介绍了如何创建基本的维恩（或欧拉）图以及配置特定于该类型的设置。您还可以查看下表以简要了解维恩图的特征：

模组

维恩图需要添加核心和维恩图模块：

快速开始

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

//create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: ["A", "B"], value: 25}
];

// create a chart and set the data
chart = anychart.venn(data);

// configure labels of intersections
chart.intersections().labels().format("{%x}");

// set the container id
chart.container('container');

// initiate drawing the chart
chart.draw();

常规设置

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

特殊设定

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

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

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

注意：可以向数据添加自定义字段-请参见本文的“ 标签和工具提示”部分。

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

//create data
var data = [
    {
    x: "A",
    name: "Set A",
    value: 400
    },
    {
    x: "B",
    name: "Set B",
    value: 200
    }
];

// create a chart and set the data
chart = anychart.venn(data);

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

// create data
var 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 data
var 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 data
var 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 separator
chart.dataSeparator("+");

本教程未完待续，感兴趣的朋友可以下载 AnyGantt试用版免费体验哦~更多产品信息请咨询

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