国产精品免费视频一区二区三区 ,麻豆视频免费版,国产亚洲精品国产福利你懂的

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

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

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

相關鏈接：

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

點擊下載Anychart最新試用版

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

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

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

如何創建JavaScript燭臺圖

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

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

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

現在，將詳細解釋每個步驟。

步驟1：建立HTML網頁

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

該頁面應如下所示：

<!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>

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

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

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

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

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

您可以從引用必要的腳本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正版授權的朋友可以

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼