翻譯|使用教程|編輯:楊鵬連|2020-07-20 11:26:54.797|閱讀 170 次
概述:數據集是將數據表示為行的集合,類似于數據庫查詢結果。在大多數圖表類型中使用的此數據模型在為多系列圖表設置數據時特別有用。 本文介紹了如何創建數據集并對其執行操作。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數據分析、統計學、金融等領域。
總覽
數據集是將數據表示為行的集合,類似于數據庫查詢結果。在大多數圖表類型中使用的此數據模型在為多系列圖表設置數據時特別有用。
本文介紹了如何創建數據集并對其執行操作。
班級
這是允許您使用AnyChart中的數據集的類的列表:
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);
對象數組
此示例顯示了如何將數據組織為一組對象來設置數據:// 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字符串來進行設置。
默認情況下,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);
要映射的數據集,調用一舉成名()上的一個實例方法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);
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: