国产精品巨作无遮拦,国偷自产av一区二区三区,国产视频www

快速啟動(dòng)AnyStock教程

原創(chuàng)|使用教程|編輯：鄭恭琳|2015-10-09 10:48:53.000|閱讀 303 次

概述：本教程教大家如何快速啟動(dòng)AnyStock圖表。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

AnyStock是一款基于XML/JSON的Flash金融圖表解決方案，能將實(shí)時(shí)數(shù)據(jù)轉(zhuǎn)換為具有交互功能的精細(xì)圖表，使你的數(shù)據(jù)直觀地展現(xiàn)在Web頁(yè)面上。 AnyStock能用于展示基于數(shù)據(jù)和時(shí)間的信息，是用于客戶報(bào)表以及基于績(jī)效報(bào)表應(yīng)用程序的理想工具。本教程將手把手教你如何快速啟動(dòng)AnyStock圖表。

< AnyStock最新版本下載>

1.把AnyStock列入到你的網(wǎng)頁(yè)

將JavaScript文件列入到網(wǎng)頁(yè)的<head>部分代碼如下圖所示：

< head>
    < script src="//cdn.anychart.com/js/latest/anystock.min.js" type="text/javascript">< /script>
< /head>

2.為圖表創(chuàng)建容器

添加一個(gè)基于塊的HTML元素到你的網(wǎng)頁(yè)，設(shè)置id，width和height屬性。如果沒(méi)有指定其他行為，AnyChart使用容器的100％。示例：

< body>
    < div id="container" style="width: 500px; height: 400px;">< /div>
< /body>

3.準(zhǔn)備數(shù)據(jù)

當(dāng)你使用其它圖表，你可以使用anychart.data.set（）來(lái)設(shè)置數(shù)據(jù)。當(dāng)使用AnyStock時(shí)方法就多了（可以設(shè)置日期對(duì)象或數(shù)組，CSV，JSON以及XML），你需要使用anychart.data.table（）和.addData（）。

table = anychart.data.table();
  table.addData([
        ['2015-12-24T12:00:00','511.53', '514.98', '505.79', '506.40'],
        ['2015-12-25T12:00:00','512.53', '514.88', '505.69', '505.34'],
        ['2015-12-26T12:00:00','511.83', '514.98', '505.59', '506.23'],
        ['2015-12-27T12:00:00','511.22', '515.30', '505.49', '506.47'],
        ['2015-12-28T12:00:00','510.35', '515.72', '505.23', '505.80'],
        ['2015-12-29T12:00:00','510.53', '515.86', '505.38', '508.25'],
        ['2015-12-30T12:00:00','511.43', '515.98', '505.66', '507.45'],
        ['2015-12-31T12:00:00','511.50', '515.33', '505.99', '507.98'],
        ['2016-01-01T12:00:00','511.32', '514.29', '505.99', '506.37'],
        ['2016-01-02T12:00:00','511.70', '514.87', '506.18', '506.75'],
        ['2016-01-03T12:00:00','512.30', '514.78', '505.87', '508.67'],
        ['2016-01-04T12:00:00','512.50', '514.77', '505.83', '508.35'],
        ['2016-01-05T12:00:00','511.53', '516.18', '505.91', '509.42'],
        ['2016-01-06T12:00:00','511.13', '516.01', '506.00', '509.26'],
        ['2016-01-07T12:00:00','510.93', '516.07', '506.00', '510.99'],
        ['2016-01-08T12:00:00','510.88', '515.93', '505.22', '509.95'],
        ['2016-01-09T12:00:00','509.12', '515.97', '505.15', '510.12'],
        ['2016-01-10T12:00:00','508.53', '516.13', '505.66', '510.42'],
        ['2016-01-11T12:00:00','508.90', '516.24', '505.73', '510.40']  
  ]);

我們也許會(huì)使用引號(hào)，因?yàn)槲覀兊臄?shù)據(jù)是除了dateTime以外的數(shù)值，定義方法如下：

[Date.UTC(2015, 12, 24, 12, 00, 00), 511.53, 514.98, 505.79, 506.40],

你也可以將數(shù)據(jù)設(shè)置為無(wú)格式 - 即作為一個(gè)timestamp字符串。
數(shù)據(jù)設(shè)置完成之后，我們需要使用.mapAs（）和.addField（）方法來(lái)映射它。我們需要定義設(shè)置那個(gè)值，然后是該值本身和匯總類(lèi)型。

mapping = table.mapAs();
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');
mapping.addField('low', 3, 'min');
mapping.addField('close', 4, 'last');
mapping.addField('value', 4, 'last');

我們使用.stock()來(lái)啟動(dòng)AnyStock圖表：

chart = anychart.stock();

由于股票圖表?yè)碛性S多小塊和系列，并且圖表本身不能創(chuàng)建系列。因此這意味著你需要定義.plot()：

chart.plot(0).ohlc(mapping);

無(wú)論你創(chuàng)建了多少小塊，有列或沒(méi)有列，它們都在一起滾動(dòng)顯示，因?yàn)樗鼈儽唤壎ǖ搅送粋€(gè)X軸。

4.創(chuàng)建圖表

將下面的代碼加上JavaScript的< script>標(biāo)簽添加到頁(yè)面的任何地方。此代碼示例使用JavaScript API來(lái)創(chuàng)建圖表，但你也可以使用JSON，XML以及CSV。示例：

< script>
 
var table, mapping, chart;
anychart.onDocumentReady(function() {
 
  table = anychart.data.table();
  table.addData([
        ['2015-12-24T12:00:00','511.53', '514.98', '505.79', '506.40'],
        ['2015-12-25T12:00:00','512.53', '514.88', '505.69', '507.34'],
        ['2015-12-26T12:00:00','511.83', '514.98', '505.59', '506.23'],
        ['2015-12-27T12:00:00','511.22', '515.30', '505.49', '506.47'],
        ['2015-12-28T12:00:00','510.35', '515.72', '505.23', '505.80'],
        ['2015-12-29T12:00:00','510.53', '515.86', '505.38', '508.25'],
        ['2015-12-30T12:00:00','511.43', '515.98', '505.66', '507.45'],
        ['2015-12-31T12:00:00','511.50', '515.33', '505.99', '507.98'],
        ['2016-01-01T12:00:00','511.32', '514.29', '505.99', '506.37'],
        ['2016-01-02T12:00:00','511.70', '514.87', '506.18', '506.75'],
        ['2016-01-03T12:00:00','512.30', '514.78', '505.87', '508.67'],
        ['2016-01-04T12:00:00','512.50', '514.77', '505.83', '508.35'],
        ['2016-01-05T12:00:00','511.53', '516.18', '505.91', '509.42'],
        ['2016-01-06T12:00:00','511.13', '516.01', '506.00', '509.26'],
        ['2016-01-07T12:00:00','510.93', '516.07', '506.00', '510.99'],
        ['2016-01-08T12:00:00','510.88', '515.93', '505.22', '509.95'],
        ['2016-01-09T12:00:00','509.12', '515.97', '505.15', '510.12'],
        ['2016-01-10T12:00:00','508.53', '516.13', '505.66', '510.42'],
        ['2016-01-11T12:00:00','508.90', '516.24', '505.73', '510.40']  
  ]);
   
  // mapping the data  
  mapping = table.mapAs();
  mapping.addField('open', 1, 'first');
  mapping.addField('high', 2, 'max');
  mapping.addField('low', 3, 'min');
  mapping.addField('close', 4, 'last');
  mapping.addField('value', 4, 'last');
 
  // defining the chart type
  chart = anychart.stock();
   
  // set the series type
  chart.plot(0).ohlc(mapping).name('ACME Corp.');
   
  // setting the chart title
  chart.title('AnyStock Basic Sample');
   
  chart.container('container');
  chart.draw();
});
 
< /script>

運(yùn)行結(jié)果如下：