AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。

點擊下載AnyGantt正式版

套裝

Venn圖的外觀設置可以配置為三種狀態(tài)：正常，懸停和選擇。使用normal（），hovered（）和selected（）方法。

將它們與以下方法結合：

• fill（）設置填充
• hatchFill（）設置填充圖案
• stroke（）設置筆劃

請注意，這些設置僅影響圈子。要了解如何調整相交區(qū)域，請參閱下一節(jié)。

在下面的示例中，有一個配置了外觀設置的維恩圖：

// configure the visual settings of the chart
chart.normal().fill("#00cc99", 0.3);
chart.hovered().fill("#00cc99", 0.1);
chart.selected().fill("#00cc99", 0.5);
chart.normal().hatchFill("percent50", "#004d39");
chart.hovered().hatchFill("percent50", "#004d39");
chart.selected().hatchFill("percent50", "#004d39");
chart.normal().stroke("#004d39");
chart.hovered().stroke("#004d39", 2);
chart.selected().stroke("#004d39", 4);

交叉口區(qū)域可以配置為三種狀態(tài)。將crosslines（）方法與normal（），hovered（）和selected（）方法一起使用。

結合使用以下方法：

• fill（）設置填充
• hatchFill（）設置填充圖案
• stroke（）設置筆劃

// configure the visual settings of intersections
var intersections = chart.intersections();    
intersections.normal().fill("green", 0.3);
intersections.hovered().fill("green", 0.1);
intersections.selected().fill("green", 0.5);
intersections.normal().hatchFill("percent50", "white");
intersections.hovered().hatchFill("percent50", "white");
intersections.selected().hatchFill("percent50", "white");
intersections.normal().stroke("white");
intersections.hovered().stroke("white", 2);
intersections.selected().stroke("white", 4);

您可以通過向數(shù)據(jù)中添加特殊字段來更改單個點（集合和相交點）的外觀：

//create data
var data = [
    {x: "A", value: 100,
     normal:   {fill: "#455a64 0.5"},
     hovered:  {fill: "#455a64 0.5"},
     selected: {fill: "#455a64 0.5"}
    },
    {x: "B", value: 100,
     normal:   {fill: "#00bfa5 0.5"},
     hovered:  {fill: "#00bfa5 0.5"},
     selected: {fill: "#00bfa5 0.5"}
    },
    {x: "C", value: 200,
     normal:   {fill: "#1976d2 0.5"},
     hovered:  {fill: "#1976d2 0.5"},
     selected: {fill: "#1976d2 0.5"}
    },
    {x: ["A", "B"], value: 10},
    {x: ["B", "C"], value: 10,
     normal:   {stroke: "2 white"},
     hovered:  {stroke: "2 white"},
     selected: {stroke: "4 white"}
    }
];

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

標簽和工具提示

標簽是可以放置在任何圖表上任何位置的文本或圖像元素（您可以在整個系列或單個點上啟用它們）。對于文本標簽，可以使用字體設置和文本格式器。

甲工具提示是文本時的曲線圖上的點懸停在顯示框。有許多可視設置和其他設置：例如，您可以使用字體設置和文本格式化程序來編輯文本，更改背景樣式，調整工具提示的位置等等。

代幣

創(chuàng)建維恩圖時，可以為圓和相交設置標簽和工具提示。

要更改標簽的文本，請將labels（）和format（）方法與標記結合使用，并配置工具提示，請對tooltip（）和format（）方法進行相同的操作。

使用交集（）方法設置交集的標簽和工具提示。

• {%x}
• {%value}
• {%name}

此外，您始終可以向數(shù)據(jù)添加自定義字段，并使用與之對應的自定義標記。

//create data
var data = [
    {
        x: "A",
        name: "Set A",
        custom_field: "info 1",
        value: 100
    },
    {
        x: "B",
        name: "Set A",
        custom_field: "info 2",
        value: 100
    },
    {
        x: ["A", "B"],
        name: "Set A + Set B",
        value: 25
    }
];

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

// configure labels of circles
chart.labels().format("{%name}\n\n{%custom_field}\n{%value}");

// configure labels of intersections
chart.intersections().labels().format("{%name}\n\n{%value}");

// configure tooltips of circles
chart.tooltip().format(
    "Set Info: {%custom_field}\nCardinality: {%value}"
);

// configure tooltips of intersections
chart.intersections().tooltip().format(
    "Intersection Info: {%custom_field}\nCardinality: {%value}"
);

格式化功能

• x
• value
• name

您還可以將自定義字段添加到數(shù)據(jù)中，并使用getData（）方法對其進行引用。

//create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: "C", value: 100},
    {x: ["A", "B"], value: 20, custom_field: "info 1"},
    {x: ["A", "C"], value: 20, custom_field: "info 2"},
    {x: ["B", "C"], value: 20, custom_field: "info 3"},
    {x: ["A", "B", "C"], value: 20, "custom_field": "info 4"}
];

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

// configure labels of intersections
chart.intersections().labels().format(function() {
  if (this.x.length > 2)
    return this.x; 
});

// configure tooltips of intersections
chart.intersections().tooltip().format(function() {
  return "Value: " + this.value + "\n(" +
         this.x.length + " sets intersecting)\n\n" +
         this.getData("custom_field"); 
});

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