青娱乐在线青娱乐,日韩高清一二三区,国产精品综合色区

如何使用AnyGantt創(chuàng)建基本的Venn Diagram（維恩圖）一

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

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

AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。

點(diǎn)擊下載AnyGantt正式版

維恩圖

總覽
以John Venn命名的Venn圖是表示不同集合的有限集合之間所有可能的邏輯關(guān)系的圖。集合顯示為圓或其他閉合曲線內(nèi)的區(qū)域，集合的公共元素顯示為這些圓的交點(diǎn)。

AnyChart Venn圖表類型也可以用于創(chuàng)建歐拉圖。以Leonhard Euler命名的Euler圖與Venn圖非常相似，但僅表示集合之間的相關(guān)關(guān)系。

本文介紹了如何創(chuàng)建基本的維恩（或歐拉）圖以及配置特定于該類型的設(shè)置。您還可以查看下表以簡(jiǎn)要了解維恩圖的特征：

如何使用AnyGantt創(chuàng)建基本的Venn Diagram（維恩圖）一

模組

維恩圖需要添加核心和維恩圖模塊：

快速開(kāi)始

要?jiǎng)?chuàng)建維恩圖，請(qǐng)使用anychart.venn（）圖表構(gòu)造函數(shù)，如以下示例所示：

//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();

常規(guī)設(shè)置

在AnyChart中，對(duì)于所有圖表類型（包括維恩圖），都以相同的方式配置了許多設(shè)置（例如，圖例和交互設(shè)置）。

特殊設(shè)定

數(shù)據(jù)
Venn圖的數(shù)據(jù)可以傳遞到圖表構(gòu)造函數(shù)anychart.venn（）或data（）方法。
創(chuàng)建數(shù)據(jù)時(shí)，應(yīng)將以下數(shù)據(jù)字段用于圓和相交區(qū)域：

x 設(shè)置唯一標(biāo)識(shí)符
value 設(shè)定尺寸
name 設(shè)置名稱

該name字段是可選的，并且元素名稱與標(biāo)識(shí)符不同，不需要唯一。默認(rèn)情況下，圓的名稱顯示在標(biāo)簽，工具提示和圖例中。但是，在相交的情況下，標(biāo)簽的默認(rèn)選擇是value。

注意：可以向數(shù)據(jù)添加自定義字段-請(qǐng)參見(jiàn)本文的“ 標(biāo)簽和工具提示”部分。

下面的示例顯示了兩個(gè)設(shè)置了名稱的圓圈：

//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);

要設(shè)置相交的標(biāo)識(shí)符（在其x字段中），請(qǐng)組合相交圓的標(biāo)識(shí)符。您可以使用數(shù)組：

// 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}
];

借助數(shù)據(jù)分隔符，還可以將圓的標(biāo)識(shí)符設(shè)置為字符串。默認(rèn)的分隔符是＆：

// 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方法可以將其更改為所需的任何內(nèi)容：

// 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("+");

本教程未完待續(xù)，感興趣的朋友可以下載 AnyGantt試用版免費(fèi)體驗(yàn)哦~更多產(chǎn)品信息請(qǐng)咨詢

APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過(guò)連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。