我們將繼續更新  Challenge AnyChart！我們提供了新的數據可視化教程。他們很好地展示了我們的JavaScript圖表庫是多么強大，現在我們將向您展示如何構建另一個有趣的圖表，其外觀不同但代碼非常相似 - 具有多級X軸的交互式JS柱形圖。

【點擊下載AnyChart最新版本】

數據可視化任務

以下是客戶要求我們解決的問題：

我想在柱形圖中顯示子類別的數據，是否可能？

為了說明如何放置嵌套軸，他們附上了以下圖片：

●使用視圖和迭代器對象處理數據，

●使用額外的軸，

●使用自定義比例，

●使用刻度蜱的重量。

方案概述

首先，讓我們修改源數據并在其中添加空值，以便按類別直觀地分隔數據。

然后，繪制圖表并完成比例和邊界的計算后，添加一個額外的軸并以首選方式設置刻度和標簽。

預處理

在將數據提供給圖表之前，讓我們將空值添加到數據中，這將使一個類別結束而另一個類別開始的位置可見。

要實現此目的，請在數組的開頭添加一個空值，在結尾添加一個空值，并在每次類別名稱更改時添加兩個空項。

function preprocessData(data){  
if (data.length > 0) {
 data.unshift([data[0][0]]);
 data.push([data[data.length - 1][0]]);   
 for (var i = 2; i < data.length - 1; i++) {      
 var previous = data[i-1][0];      
 var current = data[i][0];     
  if (current!=previous) {
    data.splice(i, 0, [previous], [current]);
    i = i+2;
    }
    else {
     data.splice(i, 0, [previous]);
     i += 1;
    }
    }
 }
 return anychart.data.set(data);}

完成后，使用mapAs（）方法將子類別名稱添加到元數據中  以獲取不同的視圖，并將它們用作X軸的名稱，如下所示：

chart.column(data.mapAs({'year': 0, 'value': 2, 'sub-category': 1}));
chart.xScale().names('sub-category');

現在可以繪制JS柱形圖本身。

JS柱形圖上的額外軸和附加比例

現在是為圖表添加額外軸的時候了。要實現此目的，請使用迭代器對象創建一個函數。它將用于探索視圖和查找類別和子類別。

之后，在類別之間繪制刻度并設置權重。這將使圖表更好看：

var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator();while(iter.advance()) {  var name = iter.get('category');  var value = iter.get('sub-category');
  names.push(name);
  if (name && names[names.length - 1] != names[names.length - 2])
    ticks.push(iter.getIndex());
  }
  weights.push(value?0.5:0.2);}

軸與秤一起使用。更確切地說，前者可視化后者。因此，為了實現該想法，需要包含類別和子類別的數據的自定義比例。然后讓我們將值，名稱和刻度傳遞給此比例：

var customScale = anychart.scales.ordinal();
customScale.values(chart.xScale().values());
customScale.names(names);customScale.ticks(ticks);

并在其上構建新軸：

chart.xAxis(1)
  .scale(customScale)
  .orientation('top')
  .ticks(true);

最后，我們將權重與圖表比例同步：

chart.xScale().weights(weights);

并禁用主軸上的刻度：

chart.xAxis(0).ticks(false);

如前所述，AnyChart一切皆有可能！現在，已準備好呈現已經在教程中創建的具有多級X軸的整個JS柱形圖。

想要購買AnyChart正版授權的朋友可以。

有關產品動態更多的精彩內容，敬請關注下方的微信公眾號▼▼▼