跨平台图表控件AnyChart快速入门教程（八）：数据集（上）

本系列教程将为您介绍如何快速掌握AnyChart，本文介绍了如何创建数据集并对其执行操作。

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

AnyChart现已更新至最新版本8.7.0，九大数据可视化新功能上线，改进了功能并修复了一些bug。新版本，新功能，赶快下载体验吧~（点击查看更新详情）

AnyChart最新试用版

数据集

总览

数据集是将数据表示为行的集合，类似于数据库查询结果。在大多数图表类型中使用的此数据模型在为多系列图表设置数据时特别有用。

本文介绍了如何创建数据集并对其执行操作。

class

这是允许您使用AnyChart中的数据集的类的列表：

• 数据集-anychart.data.Set

• 数据视图-anychart.data.View

• 迭代器-anychart.data.Iterator

设定数据

AnyChart中的数据集定义为anychart.data.Set类的实例。

数据可以组织为数组数组，对象数组或CSV字符串（另请参见：CSV中的数据）。数据字段的选择取决于图表类型。

1.创建数据集。要创建数据集，请将数据传递给anychart.data.set（）方法：

var dataSet = anychart.data.set(data);

2.映射数据。如果将数据设置为数组数组或CSV字符串，则需要映射数据集。对于组织为对象数组的数据，映射是可选的。

调用mapAs（）方法，并将要创建的系列类型所需的字段名称链接到数据中的列索引或字段名称：

var mapping = dataSet.mapAs({x: 0, value: 1});var mapping = dataSet.mapAs({x: "x", value: "value"});

3.创建系列。

最后一步是将映射传递到图表或系列构造函数：

var chart = anychart.column();var series = chart.column(mapping);

如果数据以对象数组的形式组织，则可以将数据集直接传递到图表或系列构造函数：

var chart = anychart.column();var series = chart.column(dataSet);

注意：但是，如果使用自定义数据字段，则需要重新映射它们。

数组

以下示例显示了如何将数据组织为数组来设置数据：

// create datadata = [  ["January", 12000],  ["February", 15000],  ["March", 16000],  ["April", 14000],  ["May", 10000]];// create a data setvar dataSet = anychart.data.set(data);// map the datavar mapping = dataSet.mapAs({x: 0, value: 1});// create a chartvar chart = anychart.column();// create a series and set the datavar series = chart.column(mapping);

对象数组

此示例显示了如何将数据组织为一组对象来设置数据：

// create data  var data = [    {x:"January", value: 12000},    {x:"February", value:  15000},    {x:"March", value:  16000},    {x:"April", value:  14000},    {x:"May", value:  10000}  ];// create a data setvar dataSet = anychart.data.set(data);// create a chartvar chart = anychart.column();// create a series and set the datavar series = chart.column(data);

CSV字符串

下面的示例显示了如何将数据组织为CSV字符串来进行设置。

默认情况下，AnyChart将CSV数据中的逗号视为列分隔符，将换行符视为行分隔符，但是anychart.data.set（）可以接受具有替代设置的对象作为第二个参数。

使用columnsSeparator和rowsSeparator字段设置分隔符，并ignoreFirstRow在需要时忽略数据的第一行。

// create datavar data = "x;value*" +       "January;12000*" +       "February;15000*" +       "March;16000*" +       "April;14000*" +       "May;10000*";// create an object with csv settingscsvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};// create a data setvar dataSet = anychart.data.set(data, csvSettings);// map the datavar mapping = dataSet.mapAs({x: 0, value: 1});// create a chartvar chart = anychart.column();// create a series and set the datavar series = chart.column(mapping);

制图

如果将数据设置为数组数组或CSV字符串，则需要映射 。

要映射的数据集，调用一举成名（）上的一个实例方法anychart.data.Set。指定要创建的系列类型所需的字段名称，并将其链接到数据中列的索引：

var mapping = dataSet.mapAs({x: 0, value: 1});

如果数据以对象数组的形式组织，则应将系列所需的字段名称链接到数据中的字段名称：

var mapping = dataSet.mapAs({x: "x", value: "value"});

请注意，在这种情况下，映射是可选的。但是，如果您的数据包含自定义字段，则需要重新映射。

在以下示例中，为多系列图表的两个系列创建两个映射：

// create datavar data = [  ["January", 12000, 10000],  ["February", 15000, 12000],  ["March", 16000, 18000],  ["April", 14000, 11000],  ["May", 10000, 9000]];// create a data setvar dataSet = anychart.data.set(data);// map the datavar mapping1 = dataSet.mapAs({x: 0, value: 1});var mapping2 = dataSet.mapAs({x: 0, value: 2});// create a chartvar chart = anychart.column();// create the first series and set the datavar series1 = chart.column(mapping1);// create the second series and set the data  var series2 = chart.column(mapping2);

重新映射

如果您的数据以对象数组的形式组织并且包含自定义字段，则需要重新映射它。

调用mapAs() 的实例方法anychart.data.Set，指定由您要创建的系列类型所需的字段名，并将其链接到数据的自定义字段。

在此示例中，自定义字段month和sales被映射为Column系列所需的x和value字段：

// create datavar data = [  {month:"January", sales: 12000},  {month:"February", sales:  15000},  {month:"March", sales:  16000},  {month:"April", sales:  14000},  {month:"May", sales:  10000}];// create a data setvar dataSet = anychart.data.set(data);// map the datavar mapping = dataSet.mapAs({x: "month", value: "sales"});// create a chartvar chart = anychart.column();// create a series and set the datavar series = chart.column(mapping);

=====================================================

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

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

标签：

来源：慧都