var dataSet = [
  {name: "Galaxies", children: [
    {name: "Elliptical", children: [
      {name: "IC 1101", value: 4000000},
      {name: "Hercules A", value: 1500000},
      {name: "A2261-BCG", value: 1000000},
      {name: "ESO 306-17", value: 1000000},
      {name: "ESO 444-46", value: 402200},
    ]},
    {name: "Spiral", children: [  
      {name: "Rubin's Galaxy", value: 832000},
      {name: "Comet Galaxy", value: 600000},
      {name: "Condor Galaxy", value: 522000},
      {name: "Tadpole Galaxy", value: 280000},
      {name: "Andromeda Galaxy", value: 220000} 
    ]}
  ]}
];

var chart = anychart.treeMap(dataSet, "as-tree");

容器中，并使用 draw 命令顯示它。

chart.title("The 10 Largest Galaxies in the Known Universe");
chart.container("container");
chart.draw();

現(xiàn)在JS樹形圖基本上已經(jīng)準(zhǔn)備好了：

加載樹形圖時，只會顯示兩個圖塊，“橢圓”和“螺旋”。然后可以單擊它們，展開其各自的子星系，這就是所謂的下鉆操作。

為什么會只有兩塊？因為默認(rèn)情況下，最大深度值設(shè)置為1。這意味著一次只能看到其父級的一個級別。較低的級別是隱藏的。在第一層，將“星系”分為“橢圓”和“螺旋”，所以只能看到這一層。

顯示所有星系圖塊只需要使用maxDepth()函數(shù)更改最大深度值。

chart.maxDepth(2);

效果如下：

在這張圖表中，可以看到星系是如何根據(jù)層次結(jié)構(gòu)進(jìn)行分組的，還可以單擊頂部的“橢圓”或“螺旋”標(biāo)題來放大其子星系。

完整代碼：

現(xiàn)在，你可以一目了然地看到10個最大星系的規(guī)模并進(jìn)行比較。下面展示如何自定義JavaScript樹形圖。

自定義JS樹形圖

A. 改變顏色

改變?nèi)魏螆D表的外觀和感覺有一種簡單方法就是更改顏色。

chart.normal().fill('#B46FC2');
chart.hovered().fill('#44008B', 0.8);
chart.selected().fill('#0A0068', 0.8);
chart.selected().hatchFill("forward-diagonal", '#282147', 2, 20);

添加了fill()和hashFill()方法來更改樹形圖的顏色。

B. 應(yīng)用線性色標(biāo)?

在樹形圖中，除了大小，圖塊的顏色也有助于突出顯示比例。可以借助線性色標(biāo)根據(jù)相應(yīng)的數(shù)據(jù)維度自動為圖塊著色。?

創(chuàng)建一個線性色標(biāo)，為其提供兩個值，一個為最低范圍值，另一個為最高值，最后啟用顏色范圍。?

var customColorScale = anychart.scales.linearColor();
customColorScale.colors(['#37B8F7', '#ffcc00']);
chart.colorScale(customColorScale);
chart.colorRange().enabled(true);
chart.colorRange().length('90%');

實現(xiàn)這些需要修改上一節(jié)中的代碼。

C. 格式化標(biāo)簽和工具提示?

可以使用HTML來格式化標(biāo)簽。為此，需要為標(biāo)簽啟用 HTML。然后，你就可以不受限制地使用HTML對它們進(jìn)行格式化。?

可以把標(biāo)簽格式化為HTML元素，并對其進(jìn)行樣式設(shè)計，以增加字體大小和改變顏色。?

chart.labels().useHtml(true);
chart.labels().format(
  "{%name}
{%value}"
);

正如你在上面的代碼片段中看到的，還使用了{(lán)%name}和{%value}標(biāo)記，用來更改樹形圖標(biāo)簽和工具提示的文本。這樣，在創(chuàng)建可視化時將為每個星系輸出名稱和比例值。?

此外，使用format()方法來定制工具提示的文本。一個內(nèi)容豐富的工具提示有助于更好地理解數(shù)據(jù)。?

chart.tooltip().format(
    "Scale: {%value} light-years"
);

D. 按升序排列圖塊?

默認(rèn)情況下，樹形圖圖塊按降序排列?？梢钥吹叫窍凳菑母叩降团帕械?，規(guī)模最大的IC 1101星系是左起第一個。?

如果需要升序排列，那么添加：?

chart.sort("asc");

下面是一個完整樣例：?

結(jié)論?

恭喜現(xiàn)在已經(jīng)學(xué)會了輕松地創(chuàng)建出色的交互式JavaScript樹形圖！請參閱樹形圖文檔，以便了解它還可以做些什么，或者使用不同的圖表庫。

譯者介紹?

翟珂，社區(qū)編輯，目前在杭州從事軟件研發(fā)工作，做過電商、征信等方面的系統(tǒng)，享受分享知識的過程，充實自己的生活。

原文標(biāo)題：??How to Build a Treemap Using JavaScript??，作者：Awan Shrestha

文章題目：使用JavaScript構(gòu)建樹形圖
標(biāo)題網(wǎng)址：http://uogjgqi.cn/article/dpchjsd.html