跨平台图表控件AnyChart教程：如何使用多级X轴编写JS柱形图

AnyChart是灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。本教程将为您介绍如何使用多级X轴编写JS柱形图。

我们将继续更新  Challenge AnyChart！我们提供了新的数据可视化教程。他们很好地展示了我们的JavaScript图表库是多么强大，现在我们将向您展示如何构建另一个有趣的图表，其外观不同但代码非常相似 – 具有多级X轴的交互式JS柱形图。

【AnyChart最新版本】

数据可视化任务

以下是客户要求我们解决的问题：

我想在柱形图中显示子类别的数据，是否可能/p>

为了说明如何放置嵌套轴，他们附上了以下图片：

●使用视图和迭代器对象处理数据，

●使用额外的轴，

●使用自定义比例，

●使用刻度蜱的重量。

方案概述

首先，让我们修改源数据并在其中添加空值，以便按类别直观地分隔数据。

然后，绘制图表并完成比例和边界的计算后，添加一个额外的轴并以首选方式设置刻度和标签。

预处理

在将数据提供给图表之前，让我们将空值添加到数据中，这将使一个类别结束而另一个类别开始的位置可见。

要实现此目的，请在数组的开头添加一个空值，在结尾添加一个空值，并在每次类别名称更改时添加两个空项。

function preprocessData(data){  if (data.length > 0) { data.unshift([data[0][0]]); data.push([data[data.length - 1][0]]);    for (var i = 2; i < data.length - 1; i++) {       var previous = data[i-1][0];       var current = data[i][0];       if (current!=previous) {    data.splice(i, 0, [previous], [current]);    i = i+2;    }    else {     data.splice(i, 0, [previous]);     i += 1;    }    } } return anychart.data.set(data);}

完成后，使用mapAs（）方法将子类别名称添加到元数据中  以获取不同的视图，并将它们用作X轴的名称，如下所示：

chart.column(data.mapAs({'year': 0, 'value': 2, 'sub-category': 1}));chart.xScale().names('sub-category');

现在可以绘制JS柱形图本身。

JS柱形图上的额外轴和附加比例

现在是为图表添加额外轴的时候了。要实现此目的，请使用迭代器对象创建一个函数。它将用于探索视图和查找类别和子类别。

之后，在类别之间绘制刻度并设置权重。这将使图表更好看：

var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator();while(iter.advance()) {  var name = iter.get('category');  var value = iter.get('sub-category');  names.push(name);  if (name && names[names.length - 1] != names[names.length - 2])    ticks.push(iter.getIndex());  }  weights.push(value.5:0.2);}

轴与秤一起使用。更确切地说，前者可视化后者。因此，为了实现该想法，需要包含类别和子类别的数据的自定义比例。然后让我们将值，名称和刻度传递给此比例：

var customScale = anychart.scales.ordinal();customScale.values(chart.xScale().values());customScale.names(names);customScale.ticks(ticks);

并在其上构建新轴：

chart.xAxis(1)  .scale(customScale)  .orientation('top')  .ticks(true);

最后，我们将权重与图表比例同步：

chart.xScale().weights(weights);

并禁用主轴上的刻度：

chart.xAxis(0).ticks(false);

如前所述，AnyChart一切皆有可能！现在，已准备好呈现已经在教程中创建的具有多级X轴的整个JS柱形图。

想要购买AnyChart正版授权的朋友可以咨询官方客服。

标签：