點(diǎn)擊下載Anychart最新試用版

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

以下是客戶制定挑戰(zhàn)的任務(wù)：

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

此外，客戶還分享了以下圖片，以說(shuō)明他想使用AnyChart的JavaScript圖表庫(kù)創(chuàng)建的內(nèi)容：

要根據(jù)此任務(wù)構(gòu)建解決方案，這是我們需要的：

• 通過(guò)視圖和迭代器處理數(shù)據(jù);

• 使用額外的軸;

• 使用自定義秤;

• 使用刻度蜱的重量。

方案概述

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

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

在數(shù)據(jù)中查找組

將數(shù)據(jù)作為數(shù)據(jù)提供給圖表后，使用數(shù)據(jù)集不會(huì)停止。

借助mapAs方法，可以獲得不同的視圖，即按給定參數(shù)細(xì)分。我們將抓住這個(gè)機(jī)會(huì)。

然后，讓我們使用  迭代器對(duì)象來(lái)探索視圖，以便查找類別和子類別。

使用額外軸不作為軸

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

一個(gè)X軸將是我們將完全用作軸的默認(rèn)X軸。我們只會(huì)禁用自己的滴答聲。

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

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

補(bǔ)充計(jì)算的附加量表

軸使用刻度并基本上可視化它們。因此，為了實(shí)現(xiàn)這個(gè)想法，我們需要一個(gè)包含有關(guān)類別和子類別的數(shù)據(jù)的自定義比例。

我們將分析數(shù)據(jù)并創(chuàng)建一組刻度和類別名稱。然后我們將在那個(gè)尺度上構(gòu)建軸。

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

為了獲得一個(gè)漂亮的圖片，其中不同的數(shù)據(jù)組彼此分開(kāi)，讓我們修改數(shù)據(jù)并在其中插入空值。

之后，為了將視覺(jué)焦點(diǎn)從空點(diǎn)轉(zhuǎn)移到真實(shí)數(shù)據(jù)，我們將使用權(quán)重特征。

我們將得到的填充類型應(yīng)該使得對(duì)這種可視化的數(shù)據(jù)的感知更有效。

結(jié)果：具有多級(jí)別類別軸的交互式JavaScript圖表

使用多級(jí)別類別軸檢查圖表的代碼：

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

本篇教程對(duì)您是否有用？歡迎分享您的疑問(wèn)和看法~

想要購(gòu)買(mǎi)Anychart正版授權(quán)的朋友可以。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼