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

點擊下載AnyGantt正式版

相關內容推薦：

如何使用AnyGantt創建樹狀圖（一）

色階

默認情況下，樹形圖圖表的色標為序數，并且圖塊以默認調色板的顏色進行著色。顏色范圍是自動設置的。

序數

要自定義序數色標，應使用ordinalColor（）構造函數顯式創建它。

將其與range（）組合以設置要用不同顏色標記的加熱范圍（兩個或多個）。然后，您可以使用colors（）方法為每個范圍設置顏色。請注意，如果未指定顏色和范圍，則使用順序色標的默認設置。

要將比例設置為圖表的顏色比例，請使用colorScale（）方法。

（可選）您可以使用colorRange（）啟用顏色范圍 -表示色階的特殊交互式元素。使用順序色標時，顏色范圍將顯示范圍及其顏色。

該colorLineSize（）允許您自定義色階（缺省值為20）的大小。查看其他設置：anychart.core.ui.ColorRange。

此示例顯示了具有順序色標和顏色范圍的樹圖：

// create and configure a color scale.
var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
    {less: 20000000},
    {from: 20000000, to: 50000000},
    {from: 50000000, to: 70000000},
    {greater: 70000000}
]);
customColorScale.colors(["lightgray", "#9ed1de", "#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add a color range
chart.colorRange().enabled(true);
chart.colorRange().length("100%");

最后，調用colorScale（）將比例設置為圖表的顏色比例，并調用colorRange（）添加顏色范圍。使用線性色標，它看起來像是從第一種顏色到第二種顏色的漸變。

在以下示例中，有一個帶有線性色標和顏色范圍的樹形圖：

// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// add a color range
chart.colorRange().enabled(true);
chart.colorRange().length("100%");

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

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

Tokens

要更改標簽的文本，請將labels（）和format（）方法與tokens結合使用。

要配置工具提示，請對tooltip（）和format（）方法執行相同的操作。

以下是可與樹圖圖表一起使用的標記列表：

• {%id}
• {%name}
• {%size}
• {%value}

此外，您始終可以將自定義字段添加到數據中，并使用與其對應的自定義標記。

此示例顯示了如何使用令牌。與常規令牌一起使用自定義令牌{%capital}：

// create data
var data = [
  {name:   "European Union - Top 10 Most Populated Countries", children: [
    {name: "Belgium",        value: 11443830, capital: "Brussels" },
    {name: "France",         value: 64938716, capital: "Paris"    },
    {name: "Germany",        value: 80636124, capital: "Berlin"   },
    {name: "Greece",         value: 10892931, capital: "Athens"   },
    {name: "Italy",          value: 59797978, capital: "Rome"     },
    {name: "Netherlands",    value: 17032845, capital: "Amsterdam"},
    {name: "Poland",         value: 38563573, capital: "Warsaw"   },
    {name: "Romania",        value: 19237513, capital: "Bucharest"}, 
    {name: "Spain",          value: 46070146, capital: "Madrid"   },
    {name: "United Kingdom", value: 65511098, capital: "London"   }  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(
  "{%name} {%value}"
);

// configure tooltips
chart.tooltip().format(
  "population: {%value}\ncapital: {%capital}"
);

要配置標簽和工具提示，可以使用格式化功能和以下字段：

• name
• size
• value

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

下面的示例演示如何使用格式化功能。與常規字段一起使用自定義字段capital：

// create data
var data = [
  {name:   "European Union - Top 10 Most Populated Countries", children: [
    {name: "Belgium",        value: 11443830, capital: "Brussels" },
    {name: "France",         value: 64938716, capital: "Paris"    },
    {name: "Germany",        value: 80636124, capital: "Berlin"   },
    {name: "Greece",         value: 10892931, capital: "Athens"   },
    {name: "Italy",          value: 59797978, capital: "Rome"     },
    {name: "Netherlands",    value: 17032845, capital: "Amsterdam"},
    {name: "Poland",         value: 38563573, capital: "Warsaw"   },
    {name: "Romania",        value: 19237513, capital: "Bucharest"}, 
    {name: "Spain",          value: 46070146, capital: "Madrid"   },
    {name: "United Kingdom", value: 65511098, capital: "London"   }  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(function() {
  var population = Math.round(this.value/100000)/10;
  return "" + this.name + 
         " " + population + " mln";
});

// configure tooltips
chart.tooltip().format(function() {
  var population = Math.round(this.value/100000)/10;
  return "population: " + population +
         " mln\ncapital: " + this.getData("capital");
});

標簽的字體尺寸可根據瓦片的大小自動地調整-使用標記（）與adjustFontSize（）和true作為參數，以使該模式：

/* adjust the font size of labels
according to the size of tiles */
chart.labels().adjustFontSize(true);

默認情況下，當前顯示級別的父元素顯示為標題。要禁用或啟用它們，請使用或作為參數調用headers（）方法：falsetrue

// disable headers
chart.headers(false);

//set the maximum height of headers
chart.maxHeadersHeight("20%");

更改標題的默認文本類似于配置標簽和工具提示。您應該將format（）方法與標記或格式化功能一起使用：

// configure the text of headers in the hovered state
chart.hovered().headers().format("{%value}");

// configure the font of headers
chart.normal().headers().fontColor("#990000");
chart.normal().headers().fontSize("14");
chart.normal().headers().fontWeight('bold');
chart.hovered().headers().fontColor("#000099");

通過將header字段添加到數據，可以單獨配置每個標頭：

// create data
var data = [
  {name:     "Slavic Languages",
   normal:  {header: {
                      format: "{%name} ({%value} Total)",
                      fontColor: "#990000",
                      fontSize: "14",
                      fontWeight: "bold"
                     }
            },
   hovered: {header: {fontColor: "#000099"}},
   children: [
    {name:   "East Slavic", header: null, children: [
      {name: "Russian",        value: 150000000},
      {name: "Ukrainian",      value:  45000000},
      {name: "Belarusian",     value:   3200000}
    ]},
    {name:   "West Slavic", header: null, children: [
      {name: "Polish",         value:  55000000},
      {name: "Czech",          value:  10600000},
      {name: "Slovak",         value:   5200000}
    ]},
    {name:   "South Slavic", header: null, children: [
      {name: "Serbo-Croatian", value:  21000000},
      {name: "Bulgarian",      value:   9000000},
      {name: "Slovene",        value:   2500000},
      {name: "Macedonian",     value:   1400000}
    ]}  
  ]} 
];

// create a chart and set the data
chart = anychart.treeMap(data, "as-tree");

默認情況下，如果標題的文本不適合其高度，則不顯示該文本。但是，您可以隱藏此類文本，也可以始終顯示標題文本。要設置標題的顯示模式，調用headersDisplayMode與中列出的參數中的一個方法anychart.enums.LabelsDisplayMode：

• "alwaysShow" （默認）
• "clip"
• "drop"

// set the display mode of headers
chart.headersDisplayMode("drop");

默認情況下，樹形圖是交互式的。它具有內置的向下鉆取功能：如果單擊某個元素，則可以向下鉆取其子級；如果單擊一個標題，則可以向上鉆取一個級別。可以修改此行為-使用以下方法：

• drillTo（）鉆取到一個項目
• drillUp（）向上鉆取
• getDrilldownPath（）獲取下鉆路徑

有時，您可能還需要使用anychart.data.Tree類的search（）方法在數據中執行搜索（請參閱“ 樹數據模型”文章以了解有關操作類似樹的數據的更多信息）。例如，如果要在數據樹中向下鉆取特定項目，請調用search（）以獲取該項目，并調用drillTo（）來對其進行深入研究。要進行向上鉆取，請調用drillUp（）：

/* locate an item in the data tree
and get it as an object */
var item = treeData.search("name", "Lvl 3-4");

// drill down to the item
chart.drillTo(item);

// drill up
chart.drillUp();

此示例顯示如何使用自定義功能向下鉆取到特定項目，向上鉆取并將向下鉆取路徑添加到圖表標題：

禁用追溯

// disable the drilldown feature
chart.listen("drillchange", function(e){
  return false;
});

本教程未完待續，感興趣的朋友可以下載AnyGantt試用版免費體驗哦~更多產品信息請咨詢

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