麻豆久久,国产精品成人无码专区,91污污

跨平臺圖表控件Anychart教程：如何創建JavaScript氣泡圖（上）

翻譯|使用教程|編輯：吳園園|2020-03-09 17:02:21.270|閱讀 452 次

概述：在本教程中，我將教您如何構建自己的交互式JS氣泡圖并通過自定義實現它。所有示例都將提供完整代碼。

相關鏈接：

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

點擊下載Anychart最新試用版

您是否曾經想過使用JavaScript創建氣泡圖，但不知道如何？繼續閱讀以了解有關氣泡圖的更多信息，以及如何快速輕松地構建氣泡圖。

氣泡圖是散點圖的擴展。最常見的是，它們顯示三個變量，分別表示為點的水平距離（x），點的垂直距離（y）和點的大?。▃）。氣泡圖是一種很棒的可視化技術，可讓用戶比較數據點。如果設計得當，它確實可以吸引眼球并引人入勝。

在本教程中，我將教您如何構建自己的交互式JS氣泡圖并通過自定義實現它。所有示例都將提供完整代碼。

對于這份“入門”指南，我決定探索前30部票房最高的電影的數據。讓我們看一下每部電影的總收入，預算以及發行年份。對于該數據集的可視化，氣泡圖是一個特別好的選擇，因為它將使我們能夠以一種有趣而優美的方式輕松地比較這三個數字變量。

要創建的氣泡圖

跨平臺圖表控件Anychart教程：如何創建JavaScript氣泡圖

建立JavaScript氣泡圖

遵循以下四個簡單步驟即可構建JavaScript氣泡圖：

創建一個HTML頁面。
添加必要的腳本。
加載將可視化的數據。
繪制圖表。

1、創建一個HTML頁面

我們需要做的第一件事是設置一個HTML頁面以及添加一個HTML容器來承載我們的數據可視化。這樣做如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Bubble Chart</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
        // chart code goes here
    </script>
  </body>
</html>

我想在這里強調兩件事。首先也是最重要的是div，我已經命名了一個元素container。這是一個塊級元素，我們將在其中繪制圖表。

其次，我編寫了CSS規則來管理容器元素的外觀。這些特定的規則將確保我們基于JavaScript的氣泡圖占據整個頁面。

2、添加必要的腳本

列表上的第二項是添加必要的腳本。

我們將使用AnyChart JS Charts庫，該庫將使我們能夠快速輕松地構建可視化文件。它是一種輕量級，強大而靈活的制圖解決方案，可供非營利組織免費使用。

為了使用AnyChart，我們需要引用其基本腳本。當我們從外部JSON源加載數據時，我們還應該引用AnyChart的數據適配器腳本。

<script src="http://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>

3、加載我們將要可視化的數據

我們將可視化 Kaggle.com上IMDb電影數據集中的數據。Kaggle有許多用戶提供的數據集，涵蓋了廣泛的應用程序。為了方便起見，我已經通過刪除未使用的變量并對我們將使用的變量進行重命名來對數據進行預處理，以使它們可以被AnyChart識別。特別是，我將發布年份重命名為x，將預算重命名為，將value總金額重命名為size。數據以JSON文件的形式提供，可以在此處找到。

上載和使用此數據可能很棘手。但是，AnyChart的庫提供了許多用于處理數據的解決方案 -JSON，CSV甚至Google表格等。

在我們的情況下，我們需要使用以下代碼來加載數據：

anychart.data.loadJsonFile('data.json', function (data) {
  // chart code goes here
})

繪制圖表的代碼將放置在數據加載功能中。這樣可以確保僅在加載數據后才繪制圖表。

4、繪制圖表

最后，我們開始繪制圖表。

整個圖表代碼必須寫在anychart.onDocumentReady()函數中。加載頁面時執行此功能。

繪制圖表的代碼將放置在數據加載功能中。這樣可以確保僅在加載數據后才繪制圖表。

anychart.onDocumentReady(function() {

  // load data
  anychart.data.loadJsonFile('data.json', function (data) {

    // create a chart
    chart = anychart.bubble(data);
    // set a chart title
    chart.title("Top 30 Grossing Movies");
    // set titles for axes
    chart.xAxis().title("Years");
    chart.yAxis().title("Budget");
    // draw the chart
    chart.container("container").draw();

  })

});

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

想要購買Anychart正版授權的朋友可以

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