AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。重要推薦：

點擊下載AnyChart最新試用版

訪問行

行被定義為實例anychart.data.TableSelectable.RowProxy類，和選擇作為實例anychart.data.TableSelectable。

如果要訪問表的一行，則首先應(yīng)創(chuàng)建一行選擇，然后在此選擇中搜索該行。換句話說，不能直接訪問行。

操縱表數(shù)據(jù)通常需要訪問行，因此在“ 數(shù)據(jù)操縱”部分的某些示例中使用了下面描述的方法-請參閱“ 搜索和迭代”。

1.創(chuàng)建選擇。要訪問一個選擇的行，創(chuàng)建的一個實例anychart.data.TableSelectable通過調(diào)用createSelectable（）上的一個實例方法anychart.data.TableMapping：

selectable = mapping.createSelectable();

此方法創(chuàng)建一個包括所有行的選擇。您可以將其范圍縮小到您選擇的日期范圍 - 使用兩個鍵（日期）作為參數(shù)調(diào)用select（），可以將其作為數(shù)字，字符串或Date對象傳遞：

selectable.select("2002-01-01", "2006-01-01");

另外，有時允許您選擇所有日期的selectAll（）方法可能會有所幫助。請注意，這兩個方法都返回anychart.data.TableSelectable的實例。

您可以使用兩個可選參數(shù)調(diào)用select（）和selectAll（），以對所選數(shù)據(jù)進行分組，例如在“ 迭代”部分的第二個示例中。其中一個參數(shù)設(shè)置時間間隔，例如一天，一個月，一年等（請參閱anychart.enums.Interval），另一個參數(shù)設(shè)置間隔的數(shù)量：

selectable = mapping.createSelectable();
selectable.select("2002-01-01", "2006-01-01");
selectable.search("2004-01-01", "exact");

數(shù)據(jù)處理

您可以執(zhí)行以下數(shù)據(jù)操作：

• Reading
• Searching
• Adding
• Updating
• Removing
• Iterating

閱讀

要讀取數(shù)據(jù)，請使用anychart.data.TableSelectable.RowProxy的方法：

• get（） -接受數(shù)據(jù)字段的名稱，返回其值
• getColumn（） -接受列的索引，返回值
• getIndex（） -返回行的索引
• getKey（） -返回行的鍵（日期）

要調(diào)用上面列出的方法，您需要訪問表的一行，這需要創(chuàng)建一行選擇并執(zhí)行搜索

要查找行，請訪問選定的行（anychart.data.TableSelectable），并以該行的鍵（日期）作為第一個參數(shù)調(diào)用search（）。此方法返回anychart.data.TableSelectable.RowProxy的實例。

第二個參數(shù)設(shè)置搜索模式 -請參見anychart.enums.TableSearchMode：

• "exact"
• "exact-or-next"
• "exact-or-prev"
• "nearest"

在以下示例中，有關(guān)所顯示范圍的第一個和最后一個點的信息顯示在圖表標(biāo)題中，并且當(dāng)更改范圍時，說明也會更新。該搜索（）方法結(jié)合的get（）和getColumn（）方法允許讀取數(shù)據(jù)：

// get the shown range of points
var range = chart.getSelectedRange();

// get the values of the first and last point of the range
var firstPoint = selectable.search(range.firstSelected, "nearest");
var lastPoint = selectable.search(range.lastSelected, "nearest");
var firstDate = firstPoint.getColumn(0);
var firstLow = firstPoint.get("low");
var firstHigh = firstPoint.get("high");
var lastDate = lastPoint.getColumn(0);
var lastLow = lastPoint.get("low");
var lastHigh = lastPoint.get("high");

新增行

該addData的方法anychart.data.Table是不僅用于設(shè)定數(shù)據(jù)，而且還用于將行-只是傳遞的新的行作為一個參數(shù)的數(shù)組：

dataTable.addData([
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37],
  ["2016-01-02", 511.70, 514.87, 506.18, 506.75]
]);

還有一個可選的第二個參數(shù)用于流數(shù)據(jù)-它允許您從存儲的開頭刪除已經(jīng)存在的行。您可以指定要刪除的行數(shù)，也可以指定true刪除要添加的行數(shù)。

請記住，新數(shù)據(jù)應(yīng)與映射相對應(yīng)。可以傳遞具有其他設(shè)置的行，這些設(shè)置不會出現(xiàn)在原始數(shù)據(jù)集中（例如，自定義填充或筆觸顏色），但是有必要在映射中包括相應(yīng)的字段：

var mapping = dataTable.mapAs(
  {open: 1, high: 2, low: 3, close: 4, risingStroke: 5, fallingStroke: 5}
);

dataTable.addData([
  ["2016-01-01", 511.32, 514.29, 505.99, 506.37, "4 #00838f"],
]);

注意：可以添加具有任何日期的行。例如，可以在兩個舊行之間插入新行或重寫舊行

在此示例中，當(dāng)您按下按鈕時，隨機數(shù)據(jù)將添加到表中并顯示在圖表上：

更新行

該addData的方法anychart.data.Table是不僅用于設(shè)置和添加數(shù)據(jù)，也用于更新它。這意味著，當(dāng)您調(diào)用此方法時，可以指定數(shù)據(jù)中已經(jīng)包含的日期，并為其設(shè)置新值。

表中的數(shù)據(jù)更新后，所有映射都會自動更新。始終確保您正在更新正確的列。另外，請注意，可以傳遞帶有未在原始數(shù)據(jù)集中顯示的其他設(shè)置的行（例如，自定義填充或描邊顏色），但是有必要在映射中包括相應(yīng)的字段。

這是更新表數(shù)據(jù)的樣子：

// create a data table
dataTable = anychart.data.table(0);

// add data
dataTable.addData([
  ["2015-12-25", 506.69, 511.88],
  ["2015-12-26", 507.59, 514.98],
  ["2015-12-27", 505.49, 516.30],
  ["2015-12-28", 506.23, 514.72],
  ["2015-12-29", 505.38, 517.86],
  ["2015-12-30", 506.66, 516.98],
  ["2015-12-31", 505.99, 513.33],
  ["2016-01-01", 507.99, 515.29],
  ["2016-01-02", 506.18, 514.87]
]);

// map the data
mapping = dataTable.mapAs({low: 1, high: 2, fill: 3});

// create a stock chart
var chart = anychart.stock();
    
// create a plot and an ohlc series
var ohlcSeries = chart.plot(0).rangeColumn(mapping);

// update the first row
dataTable.addData([["2015-12-25", 510.69, 516.88," #dd2c00"]]);

拆除行

要刪除一定范圍的行，請使用兩個鍵（日期）作為參數(shù)調(diào)用anychart.data.Table的remove（）方法-它們可以作為數(shù)字，字符串或Date對象傳遞：

dataTable.remove("2015-12-28", "2015-12-31");  

dataTable.removeFirst(1); 

反復(fù)進行

• advance（） -將迭代器前進到下一行

• get（） -返回給定字段中當(dāng)前行的值

• getIndex（） -返回當(dāng)前行的索引

• getKey（） -返回當(dāng)前行的鍵

• reset（） -將迭代器重置為第一項之前的默認(rèn)位置

迭代是遍歷樹中所有項目的過程。您可以一對一地訪問它們，但是AnyChart提供了一種更簡便，更快速的即用型解決方案。

要遍歷表，首先訪問行的選擇-創(chuàng)建anychart.data.TableSelectable的實例（請參見訪問行）。然后，對其調(diào)用getIterator（）以獲取anychart.data.TableIterator對象。

最后，調(diào)用迭代器的方法：

在advance（），getKey（）和get（）方法下面的示例中，用于顯示有關(guān)落入圖表所示范圍內(nèi)的所有點的信息。更改范圍后，說明將更新。

/* create the selectable object
and select rows corresponding to the shown points */
selectable = mapping.createSelectable();
selectable.select(range.firstSelected, range.lastSelected);

// get the iterator
var iterator = selectable.getIterator();

// display information about shown points in the table
while (iterator.advance()) {
  var key = iterator.getKey();
  var date = anychart.format.dateTime(key, "dd.MM.yyyy");
  var low = iterator.get("low");
  var high = iterator.get("high");  
}

在下一個示例中，所選數(shù)據(jù)按兩年分組

/* create the selectable object,
select rows corresponding to the shown points, and group them */
selectable = mapping.createSelectable();
selectable.select(range.firstSelected, range.lastSelected, "year", 2);

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

想要購買Anychart正版授權(quán)的朋友可以