免费一级a,www.bbbbb,日韩高清一区0

如何使用AnyGantt創建基本的Venn Diagram（維恩圖）一

翻譯|使用教程|編輯：楊鵬連|2020-08-31 09:54:57.463|閱讀 364 次

概述：本文介紹了如何創建基本的維恩（或歐拉）圖以及配置特定于該類型的設置。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。