永利最大(官方)网站

点击下载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正版授权的朋友可以。

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