AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤(pán)、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：
點(diǎn)擊下載AnyChart最新試用版
總覽
表數(shù)據(jù)模型將數(shù)據(jù)表示為行和列的集合，從而可以存儲(chǔ)大型有序數(shù)據(jù)集。
本文介紹了如何設(shè)置表數(shù)據(jù)，訪問(wèn)行以及對(duì)數(shù)據(jù)執(zhí)行操作。
class
這是允許您使用AnyChart中的表數(shù)據(jù)的類的列表：
表-anychart.data.Table
映射-anychart.data.TableMapping
行選擇-anychart.data.TableSelectable
表格行-anychart.data.TableSelectable.RowProxy
迭代器-anychart.data.TableIterator
計(jì)算機(jī)-anychart.data.TableComputer
計(jì)算機(jī)行-anychart.data.TableComputer.RowProxy
您可以在以下各節(jié)中學(xué)習(xí)如何使用這些類。
設(shè)定數(shù)據(jù)
Anychart中的表數(shù)據(jù)結(jié)構(gòu)被定義為anychart.data.Table類的實(shí)例。表數(shù)據(jù)可以組織為數(shù)組數(shù)組，對(duì)象數(shù)組或CSV字符串（另請(qǐng)參見(jiàn)：CSV中的數(shù)據(jù)）。要基于這種類型的數(shù)據(jù)創(chuàng)建圖表，您應(yīng)該創(chuàng)建一個(gè)數(shù)據(jù)表，添加數(shù)據(jù)并映射該表。
1.創(chuàng)建數(shù)據(jù)表。第一步是使用anychart.data.table（）方法創(chuàng)建數(shù)據(jù)表-anychart.data.Table的實(shí)例。
如果將數(shù)據(jù)設(shè)置為數(shù)組數(shù)組或CSV字符串，請(qǐng)指定包含表鍵（日期）的列的索引作為參數(shù)（默認(rèn)為0）。如果您將數(shù)據(jù)組織為對(duì)象數(shù)組，請(qǐng)指定包含表鍵的字段的名稱。您還可以使用可選參數(shù)來(lái)設(shè)置鍵列的日期/時(shí)間模式，時(shí)間偏移，基準(zhǔn)日期和語(yǔ)言環(huán)境。
var dataTable = anychart.data.table(0);
var dataTable = anychart.data.table("x");2.添加數(shù)據(jù)。下一步是調(diào)用addData（）方法以將數(shù)據(jù)傳遞到表。請(qǐng)注意，此方法也用于添加和更新數(shù)據(jù)。
dataTable.addData(data);
3.映射數(shù)據(jù)和創(chuàng)建系列。最后，調(diào)用一舉成名（）來(lái)映射表-鏈接由您要?jiǎng)?chuàng)建的列或在您的數(shù)據(jù)字段的名稱的指標(biāo)系列的類型所需的數(shù)據(jù)字段的名稱。
var mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
var mapping = dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});然后將映射（定義為anychart.data.TableMapping的實(shí)例）傳遞給系列構(gòu)造函數(shù)：
var chart = anychart.stock();
var ohlcSeries = chart.plot(0).ohlc(mapping);
數(shù)組
此示例顯示了如何將數(shù)據(jù)組織為數(shù)組來(lái)設(shè)置數(shù)據(jù)：
// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
["2015-12-25", 512.53, 514.88, 505.69, 507.34],
["2015-12-26", 511.83, 514.98, 505.59, 506.23],
["2015-12-27", 511.22, 515.30, 505.49, 506.47],
["2015-12-28", 510.35, 515.72, 505.23, 505.80],
["2015-12-29", 510.53, 515.86, 505.38, 508.25],
["2015-12-30", 511.43, 515.98, 505.66, 507.45],
["2015-12-31", 511.50, 515.33, 505.99, 507.98],
["2016-01-01", 511.32, 514.29, 505.99, 506.37],
["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the datavar mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);
對(duì)象數(shù)組
此示例顯示了如何將數(shù)據(jù)組織為一組對(duì)象來(lái)設(shè)置數(shù)據(jù)：
create a data tablevar dataTable = anychart.data.table("x");
// add data
dataTable.addData([
{"x": "2015-12-25", "open": 512.53, "high": 514.88, "low": 505.69, "close": 507.34},
{"x": "2015-12-26", "open": 511.83, "high": 514.98, "low": 505.59, "close": 506.23},
{"x": "2015-12-27", "open": 511.22, "high": 515.30, "low": 505.49, "close": 506.47},
{"x": "2015-12-28", "open": 510.35, "high": 515.72, "low": 505.23, "close": 505.80},
{"x": "2015-12-29", "open": 510.53, "high": 515.86, "low": 505.38, "close": 508.25},
{"x": "2015-12-30", "open": 511.43, "high": 515.98, "low": 505.66, "close": 507.45},
{"x": "2015-12-31", "open": 511.50, "high": 515.33, "low": 505.99, "close": 507.98},
{"x": "2016-01-01", "open": 511.32, "high": 514.29, "low": 505.99, "close": 506.37},
{"x": "2016-01-02", "open": 511.70, "high": 514.87, "low": 506.18, "close": 506.75}]);
// map the datavar mapping = dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);
CSV字符串
下面的示例顯示了如何將數(shù)據(jù)組織為CSV字符串來(lái)進(jìn)行設(shè)置。
默認(rèn)情況下，AnyChart將CSV數(shù)據(jù)中的逗號(hào)視為列分隔符，將換行符視為行分隔符，但是addData（）可以接受具有替代設(shè)置的對(duì)象作為第三個(gè)參數(shù)。
使用columnsSeparator和rowsSeparator字段設(shè)置分隔符，并ignoreFirstRow在需要時(shí)忽略數(shù)據(jù)的第一行。
// create datavar data = "Dates;Open;High;Low;Close*" +
"2015-12-25;512.53;514.88;505.69;507.34*" +
"2015-12-26;511.83;514.98;505.59;506.23*" +
"2015-12-27;511.22;515.30;505.49;506.47*" +
"2015-12-28;510.35;515.72;505.23;505.80*" +
"2015-12-29;510.53;515.86;505.38;508.25*" +
"2015-12-30;511.43;515.98;505.66;507.45*" +
"2015-12-31;511.50;515.33;505.99;507.98*" +
"2016-01-01;511.32;514.29;505.99;506.37*" +
"2016-01-02;511.70;514.87;506.18;506.75";
// create an object with csv settings
csvSettings = {ignoreFirstRow: true, columnsSeparator: ";", rowsSeparator: "*"};
// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData(data, null, csvSettings);
// map the datavar mapping = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create a plot and an ohlc seriesvar ohlcSeries = chart.plot(0).ohlc(mapping);
ohlcSeries.name("ACME Corp.");
制圖
映射定義為anychart.data.TableMapping的實(shí)例。
要映射數(shù)據(jù)，調(diào)用一舉成名（）上的一個(gè)實(shí)例方法anychart.data.Table。指定由您要?jiǎng)?chuàng)建的系列類型所需的字段名，要么將它們鏈接到列的索引，或者在數(shù)據(jù)字段，這取決于它是否被組織成一個(gè)名稱數(shù)組的數(shù)組，對(duì)象數(shù)組或CSV字符串：
dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
dataTable.mapAs({open: "open", high: "high", low: "low", close: "close"});注意：使用anychart.data.table（）方法創(chuàng)建表時(shí)，將指定帶有鍵（日期）的列。您不能使用mapAs（）重新映射鍵列。
您還可以設(shè)置近似模式的分組數(shù)據(jù) -可用選項(xiàng)中列出anychart.enums.AggregationType。例如，這是將第一列的近似模式設(shè)置為的方式"open"：
dataTable.mapAs({open: {column: 1, type: "open"}, high: 2, low: 3, close: 4});有將數(shù)據(jù)映射的另一種方法：call mapAs（）不帶參數(shù)，然后調(diào)用激活addField（）上的實(shí)例anychart.data.TableMapping。使用兩個(gè)參數(shù)：字段名稱和數(shù)據(jù)中列的索引/字段名稱。第三個(gè)參數(shù)（可選）允許您設(shè)置近似模式：
mapping.addField("open", 1, "open");請(qǐng)注意，addField（）一次僅映射一個(gè)字段。
在以下示例中，有兩個(gè)基于相同數(shù)據(jù)的系列，但是對(duì)于第一個(gè)，它使用mapAs（）映射，而對(duì)于第二個(gè)則用addField（）映射：
// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
["2015-12-25", 512.53, 514.88, 505.69, 507.34],
["2015-12-26", 511.83, 514.98, 505.59, 506.23],
["2015-12-27", 511.22, 515.30, 505.49, 506.47],
["2015-12-28", 510.35, 515.72, 505.23, 505.80],
["2015-12-29", 510.53, 515.86, 505.38, 508.25],
["2015-12-30", 511.43, 515.98, 505.66, 507.45],
["2015-12-31", 511.50, 515.33, 505.99, 507.98],
["2016-01-01", 511.32, 514.29, 505.99, 506.37],
["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the data for the first seriesvar mapping_1 = dataTable.mapAs({open: {column: 1, type: "open"}, high: 2, low: 3, close: 4});
// map the data for the second seriesvar mapping_2 = dataTable.mapAs();
mapping_2.addField("open", 1, "open");
mapping_2.addField("high", 2);
mapping_2.addField("low", 3);
mapping_2.addField("close", 4);
// create a stock chartvar chart = anychart.stock();
// create the first plot and ohlc seriesvar ohlc_1 = chart.plot(0).ohlc(mapping_1);
// create the second plot and ohlc seriesvar ohlc_2 = chart.plot(1).ohlc(mapping_2);
此樣本顯示如何映射多個(gè)系列和技術(shù)指標(biāo)的數(shù)據(jù)：
// create a data tablevar dataTable = anychart.data.table(0);
// add data
dataTable.addData([
["2015-12-25", 512.53, 514.88, 505.69, 507.34],
["2015-12-26", 511.83, 514.98, 505.59, 506.23],
["2015-12-27", 511.22, 515.30, 505.49, 506.47],
["2015-12-28", 510.35, 515.72, 505.23, 505.80],
["2015-12-29", 510.53, 515.86, 505.38, 508.25],
["2015-12-30", 511.43, 515.98, 505.66, 507.45],
["2015-12-31", 511.50, 515.33, 505.99, 507.98],
["2016-01-01", 511.32, 514.29, 505.99, 506.37],
["2016-01-02", 511.70, 514.87, 506.18, 506.75]]);
// map the data for the frist seriesvar mapping_1 = dataTable.mapAs({value: 1});
// map the data for the second seriesvar mapping_2 = dataTable.mapAs({value: 4});
// map the data for the tecnical indicatorvar mapping_3 = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
// create a stock chartvar chart = anychart.stock();
// create the first plot and and two line seriesvar line_1 = chart.plot(0).line(mapping_1);var line_2 = chart.plot(0).line(mapping_2);
// create the second plot and a williams %r indicator
chart.plot(1).yScale().minimum(-100);
chart.plot(1).yScale().maximum(0);
chart.plot(1).williamsR(mapping_3, 4, "marker");
您還可以映射多個(gè)表。這里使用多個(gè)表格來(lái)顯示不同系列的奇數(shù)和偶數(shù)天：
// create two data tablesvar dataTable_1 = anychart.data.table(0);var dataTable_2 = anychart.data.table(0);
// add data to the first table
dataTable_1.addData([
["2018-01-01", 512.53],
["2018-01-03", 511.22],
["2018-01-05", 510.53],
["2018-01-07", 511.50],
["2018-01-09", 511.70]]);
// add data to the second table
dataTable_2.addData([
["2018-01-02", 511.83],
["2018-01-04", 510.35],
["2018-01-06", 511.43],
["2018-01-08", 511.32]]);
// map the first tablevar mapping_1 = dataTable_1.mapAs({value: 1});
// map the second tablevar mapping_2 = dataTable_2.mapAs({value: 1});
// create a stock chartvar chart = anychart.stock();
// create a plot and an two column seriesvar column_1 = chart.plot(0).column(mapping_1);var column_2 = chart.plot(0).column(mapping_2);
=====================================================
想要購(gòu)買Anychart正版授權(quán)的朋友可以
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：Anychart
半島外圍網(wǎng)上直營(yíng) 
15次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線