最新中文,人妻丝袜在线,日韩日本伦奷在线播放

跨平臺圖表控件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);