跨平台图表控件Anychart教程：数据集（上）-控件新闻-慧都网

跨平台图表控件Anychart教程：数据集（上）

翻译|使用教程|编辑：杨鹏连|2020-07-20 11:26:54.797|阅读 170 次

概述：数据集是将数据表示为行的集合，类似于数据库查询结果。在大多数图表类型中使用的此数据模型在为多系列图表设置数据时特别有用。本文介绍了如何创建数据集并对其执行操作。

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

点击下载AnyChart正式版

总览

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

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

班级

这是允许您使用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 data
data = [
  ["January", 12000],
  ["February", 15000],
  ["March", 16000],
  ["April", 14000],
  ["May", 10000]
];

// create a data set
var dataSet = anychart.data.set(data);

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

// create a chart
var chart = anychart.column();

// create a series and set the data
var series = chart.column(mapping);

跨平台图表控件Anychart教程：数据集（上）

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

// 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 set
var dataSet = anychart.data.set(data);

// create a chart
var chart = anychart.column();

// create a series and set the data
var series = chart.column(data);

CSV字符串

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

默认情况下，AnyChart将CSV数据中的逗号视为列分隔符，将换行符视为行分隔符，但是anychart.data.set（）可以接受具有替代设置的对象作为第二个参数。
使用columnsSeparator和rowsSeparator字段设置分隔符，并ignoreFirstRow在需要时忽略数据的第一行。

// create data
var data = "x;value*" +
       "January;12000*" +
       "February;15000*" +
       "March;16000*" +
       "April;14000*" +
       "May;10000*";

// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};

// create a data set
var dataSet = anychart.data.set(data, csvSettings);

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

// create a chart
var chart = anychart.column();

// create a series and set the data
var 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 data
var data = [
  ["January", 12000, 10000],
  ["February", 15000, 12000],
  ["March", 16000, 18000],
  ["April", 14000, 11000],
  ["May", 10000, 9000]
];

// create a data set
var dataSet = anychart.data.set(data);

// map the data
var mapping1 = dataSet.mapAs({x: 0, value: 1});
var mapping2 = dataSet.mapAs({x: 0, value: 2});

// create a chart
var chart = anychart.column();

// create the first series and set the data
var series1 = chart.column(mapping1);

// create the second series and set the data  
var series2 = chart.column(mapping2);