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

點擊下載AnyGantt正式版

相關(guān)內(nèi)容推薦：

如何使用AnyGantt創(chuàng)建樹狀圖（一）

色階

默認(rèn)情況下，樹形圖圖表的色標(biāo)為序數(shù)，并且圖塊以默認(rèn)調(diào)色板的顏色進(jìn)行著色。顏色范圍是自動設(shè)置的。

序數(shù)

要自定義序數(shù)色標(biāo)，應(yīng)使用ordinalColor（）構(gòu)造函數(shù)顯式創(chuàng)建它。

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

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

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

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

此示例顯示了具有順序色標(biāo)和顏色范圍的樹圖：

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

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

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

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

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

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

Tokens

要更改標(biāo)簽的文本，請將labels（）和format（）方法與tokens結(jié)合使用。

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

以下是可與樹圖圖表一起使用的標(biāo)記列表：

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

此外，您始終可以將自定義字段添加到數(shù)據(jù)中，并使用與其對應(yīng)的自定義標(biāo)記。

此示例顯示了如何使用令牌。與常規(guī)令牌一起使用自定義令牌{%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}"
);

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

• name
• size
• value

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

下面的示例演示如何使用格式化功能。與常規(guī)字段一起使用自定義字段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");
});

標(biāo)簽的字體尺寸可根據(jù)瓦片的大小自動地調(diào)整-使用標(biāo)記（）與adjustFontSize（）和true作為參數(shù)，以使該模式：

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

默認(rèn)情況下，當(dāng)前顯示級別的父元素顯示為標(biāo)題。要禁用或啟用它們，請使用或作為參數(shù)調(diào)用headers（）方法：falsetrue

// disable headers
chart.headers(false);

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

更改標(biāo)題的默認(rèn)文本類似于配置標(biāo)簽和工具提示。您應(yīng)該將format（）方法與標(biāo)記或格式化功能一起使用：

// 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字段添加到數(shù)據(jù)，可以單獨(dú)配置每個標(biāo)頭：

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

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

• "alwaysShow" （默認(rèn)）
• "clip"
• "drop"

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

默認(rèn)情況下，樹形圖是交互式的。它具有內(nèi)置的向下鉆取功能：如果單擊某個元素，則可以向下鉆取其子級；如果單擊一個標(biāo)題，則可以向上鉆取一個級別?？梢孕薷拇诵袨?使用以下方法：

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

有時，您可能還需要使用anychart.data.Tree類的search（）方法在數(shù)據(jù)中執(zhí)行搜索（請參閱“ 樹數(shù)據(jù)模型”文章以了解有關(guān)操作類似樹的數(shù)據(jù)的更多信息）。例如，如果要在數(shù)據(jù)樹中向下鉆取特定項目，請調(diào)用search（）以獲取該項目，并調(diào)用drillTo（）來對其進(jìn)行深入研究。要進(jìn)行向上鉆取，請調(diào)用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();

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

禁用追溯

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

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

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