翻譯|使用教程|編輯:吳園園|2019-08-13 14:52:49.557|閱讀 335 次
概述:AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。本教程將為您介紹如何使用如何添加多級(jí)別類別軸?。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>
相關(guān)鏈接:
數(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)品最新資訊▼▼▼
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: