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

【點擊下載AnyChart最新版本】

數(shù)據(jù)可視化任務

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

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

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

●使用視圖和迭代器對象處理數(shù)據(jù)，

●使用額外的軸，

●使用自定義比例，

●使用刻度蜱的重量。

方案概述

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

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

預處理

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

要實現(xiàn)此目的，請在數(shù)組的開頭添加一個空值，在結(jié)尾添加一個空值，并在每次類別名稱更改時添加兩個空項。

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（）方法將子類別名稱添加到元數(shù)據(jù)中  以獲取不同的視圖，并將它們用作X軸的名稱，如下所示：

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

現(xiàn)在可以繪制JS柱形圖本身。

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

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

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

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);}

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

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

并在其上構(gòu)建新軸：

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

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

chart.xScale().weights(weights);

并禁用主軸上的刻度：

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

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

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

有關產(chǎn)品動態(tài)更多的精彩內(nèi)容，敬請關注下方的微信公眾號▼▼▼