日韩精品无码专区网站,亚洲国产成人精品区综合,午夜免费福利网站

跨平臺圖表控件Anychart教程：通過四個簡單步驟制作JS燭臺圖（上）

翻譯|使用教程|編輯：吳園園|2020-03-31 10:42:46.180|閱讀 228 次

概述：完成本教程，您將可以輕松，快速，真正地用JavaScript創(chuàng)建引人注目的交互式燭臺圖。

相關(guān)鏈接：

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

點擊下載Anychart最新試用版

您是否有交易數(shù)據(jù)，正在尋找一種方法來對您的網(wǎng)站或應(yīng)用程序項目進行有效可視化？如果是這樣，JS ;燭臺圖表可能是您的最佳選擇。本教程將把創(chuàng)建此類圖表所需的過程分解為簡單的步驟，并提供有關(guān)代碼的詳細說明。即使您是編程新手，也請繼續(xù)閱讀，因為僅需基本了解即可掌握和掌握此類基于JavaScript（HTML5）的數(shù)據(jù)可視化技術(shù)。

也稱為日本燭臺圖，此圖類型是財務(wù)和股票數(shù)據(jù)可視化的最受歡迎形式之一。每個燭臺代表有關(guān)當(dāng)天開盤價，最高價，最低價和收盤價的信息。燭臺圖廣泛用于價格走勢模式的技術(shù)分析。

完成本教程，您將可以輕松，快速，真正地用JavaScript創(chuàng)建引人注目的交互式燭臺圖。

如何創(chuàng)建JavaScript燭臺圖

創(chuàng)建將在其中顯示圖表的HTML頁面。
包括所有必需的JavaScript文件。
準備要可視化的數(shù)據(jù)。
編寫圖表的JS代碼。

當(dāng)涉及到JavaScript圖表時，通常需要四個基本步驟來使幾乎任何類型的數(shù)據(jù)可視化：

本教程包括四個JS燭臺圖表示例。這是最后一個的外觀：

現(xiàn)在，將詳細解釋每個步驟。

步驟1：建立HTML網(wǎng)頁

首先，您需要創(chuàng)建一個基本的HTML頁面。包括相關(guān)標題和HTML塊元素（例如div）以放置圖表。在這里，所使用的id的值是，container. 但請隨意使用對您有意義的任何東西。

該頁面應(yīng)如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Candlestick Chart</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

請注意，您可以在塊內(nèi)指定width和height參數(shù)，<style>以修改圖表將占用的空間。我輸入100% 了兩個參數(shù)，因此圖表將填滿整個頁面。

步驟2.包含所有必要的JS文件

其次，在本<head>節(jié)中引用所有必需的腳本文件。

有許多JavaScript圖表庫具有現(xiàn)成的功能，當(dāng)您想要快速創(chuàng)建可視化效果（有時甚至是復(fù)雜的可視化效果）時，這些功能非常有用，否則它們將需要高級編碼經(jīng)驗。

在本教程中，我將使用AnyChart，更準確地說，將使用AnyChart的AnyStock JS庫，該庫專門用于可視化基于日期和時間的圖表的大型數(shù)據(jù)集，包括（但實際上不限于）股票圖表。

您可以從引用必要的腳本CDN 或下載他們在本地使用。

讓我們使用CDN鏈接。對于備用燭臺，您需要同時使用anychart-core.min.js和anychart-stock.min.js腳本。這是HTML代碼中的外觀：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Candlestick Chart</title>
  <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-stock.min.js" type="text/javascript"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    // The candlestick code will be written here
  </script>
</body>

</html>

請注意，script該<body> 部分中有一個標簽

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

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

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼