點擊下載Anychart最新試用版

數據可視化任務

以下是客戶制定挑戰的任務：

我們有嵌套子類別的數據。如何在AnyChart的幫助下在堆疊列中顯示類別和子類別？

此外，客戶還分享了以下圖片，以說明他想使用AnyChart的JavaScript圖表庫創建的內容：

要根據此任務構建解決方案，這是我們需要的：

• 通過視圖和迭代器處理數據;

• 使用額外的軸;

• 使用自定義秤;

• 使用刻度蜱的重量。

方案概述

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

然后，一旦繪制了圖表并完成了比例和界限的計算，我們將添加額外的軸。

在數據中查找組

將數據作為數據提供給圖表后，使用數據集不會停止。

借助mapAs方法，可以獲得不同的視圖，即按給定參數細分。我們將抓住這個機會。

然后，讓我們使用  迭代器對象來探索視圖，以便查找類別和子類別。

使用額外軸不作為軸

在我們要構建的JavaScript圖表中，我們將使用三個X軸，一個主軸和兩個額外軸。

一個X軸將是我們將完全用作軸的默認X軸。我們只會禁用自己的滴答聲。

另一個X軸將僅用于定位主要類別。我們不會顯示其刻度以及軸線。

第三個X軸將用于定位前兩個軸共用的刻度線。

補充計算的附加量表

軸使用刻度并基本上可視化它們。因此，為了實現這個想法，我們需要一個包含有關類別和子類別的數據的自定義比例。

我們將分析數據并創建一組刻度和類別名稱。然后我們將在那個尺度上構建軸。

使用Weights for Ticks作為可視化工具

為了獲得一個漂亮的圖片，其中不同的數據組彼此分開，讓我們修改數據并在其中插入空值。

之后，為了將視覺焦點從空點轉移到真實數據，我們將使用權重特征。

我們將得到的填充類型應該使得對這種可視化的數據的感知更有效。

結果：具有多級別類別軸的交互式JavaScript圖表

使用多級別類別軸檢查圖表的代碼：

anychart.onDocumentReady(function () 
{ var data = preprocessData([
['Accelerate', 'Onsite', 18, NaN, NaN], 
['CIS Renew', 'Offshore', 6, NaN, 2], 
['CIS Renew', 'Onsite', 7, 1, 4], 
['CIS Others', 'Offshore', NaN, NaN, 1], 
['CIS Others', 'Onsite', 2, 1, 1] ]); 
var chart = anychart.column();
// configure global settings for series labels 
chart.labels({position:'center', fontColor:'#000'}); 
//add subcategory names to the meta of one of the series 
chart.column(data.mapAs({'value': 2, 'sub-category': 1})); 
chart.column(data.mapAs({'value': 3})); 
chart.column(data.mapAs({'value': 4})); 
// turn on stacking 
chart.yScale().stackMode('value');
// use subcategory names as names of X-axis ticks 
chart.xScale().names('sub-category'); 
// set a container and draw the chart 
chart.container('container'); 
chart.draw(); 
// calculate extra axes 
createTwoLevelAxis(chart, data, 0.1); }); 
function preprocessData(data){ 
// to make beautiful spacing between categories, add 
// several empty lines with the same category names to the data 
if (data.length > 0) { 
    // add one to the beginning of the array 
    data.unshift([data[0][0]]); 
    // add one more to the end of the data 
    data.push([data[data.length - 1][0]]); 
    // add two empty items every time the category name changes, 
    // to each category 
    for (var i = 2; i < data.length - 2; i++) { 
    var previous = data[i-1][0]; 
    var current = data[i][0]; 
    if (current!=previous) 
    { 
    data.splice(i, 0, [previous], [current]); 
     i = i+2; 
    } 
  } 
} 
return anychart.data.set(data); 
} 
function createTwoLevelAxis(chart, data, padding){
      // subcategory names 
     var names = []; 
      // ticks for axes based on on main categories 
    var ticks = [];
     // weights of ticks (to make spacing between categories by using 
     // the empty lines created in preprocessData) 
    var weights = []; 
    // the iterator feature allows us to go over data, so 
    // create an iterator for the new breakdown 
    var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator(); 
    while(iter.advance()) { 
              var name = iter.get('category'); 
              var value = iter.get('sub-category'); 
              // store category names 
             names.push(name); 
             // when the border between categories is identified, create a tick 
             if (name && names[names.length - 1] != names[names.length - 2]) {
                 ticks.push(iter.getIndex()); 
                 } 
            // assign weight to the tick 
            weights.push(value?1:padding);
     } 
    // create a custom scale 
    var customScale = anychart.scales.ordinal(); 
    // supply values from the chart to the scale
    customScale.values(chart.xScale().values());
    // names of main categories only 
    customScale.names(names);
    // weights for new ticks
    customScale.weights(weights); 
    // synchronize weights with the 
    chart scale chart.xScale().weights(weights); 
    customScale.ticks(ticks); 
    // disable ticks along the main axis 
    chart.xAxis(0).ticks(false); 
    // create an extra chart axis and hide its ticks and the axis line, leaving only labels displayed 
    chart.xAxis(1) 
            .scale(customScale) 
            .stroke('none') 
            .ticks(false);
    // draw one more extra axis without the axis line and labels, leaving only big ticks 
    var additionalXaxis = chart.xAxis(2); 
    additionalXaxis.scale(customScale); 
    additionalXaxis.labels(false); 
    additionalXaxis.stroke('none'); 
    additionalXaxis.ticks() 
                 .length(46) 
                 .position('inside'); }

本篇教程對您是否有用？歡迎分享您的疑問和看法~

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

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼