跨平台图表控件Anychart教程：如何添加多级别类别轴

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。本教程将为您介绍如何使用如何添加多级别类别轴?。

Anychart最新试用版

数据可视化任务

以下是客户制定挑战的任务：

我们有嵌套子类别的数据。如何在AnyChart的帮助下在堆叠列中显示类别和子类别/p>

此外，客户还分享了以下图片，以说明他想使用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: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正版授权的朋友可以咨询官方客服。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼

标签：

来源：慧都