日本在线免费,国产人妖网址,护士裸图

跨平臺(tái)圖表控件Anychart教程：如何創(chuàng)建JavaScript氣泡圖（上）

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

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

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

相關(guān)鏈接：

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

點(diǎn)擊下載Anychart最新試用版

您是否曾經(jīng)想過(guò)使用JavaScript創(chuàng)建氣泡圖，但不知道如何？繼續(xù)閱讀以了解有關(guān)氣泡圖的更多信息，以及如何快速輕松地構(gòu)建氣泡圖。

氣泡圖是散點(diǎn)圖的擴(kuò)展。最常見(jiàn)的是，它們顯示三個(gè)變量，分別表示為點(diǎn)的水平距離（x），點(diǎn)的垂直距離（y）和點(diǎn)的大小（z）。氣泡圖是一種很棒的可視化技術(shù)，可讓用戶比較數(shù)據(jù)點(diǎn)。如果設(shè)計(jì)得當(dāng)，它確實(shí)可以吸引眼球并引人入勝。

在本教程中，我將教您如何構(gòu)建自己的交互式JS氣泡圖并通過(guò)自定義實(shí)現(xiàn)它。所有示例都將提供完整代碼。

對(duì)于這份“入門(mén)”指南，我決定探索前30部票房最高的電影的數(shù)據(jù)。讓我們看一下每部電影的總收入，預(yù)算以及發(fā)行年份。對(duì)于該數(shù)據(jù)集的可視化，氣泡圖是一個(gè)特別好的選擇，因?yàn)樗鼘⑹刮覀兡軌蛞砸环N有趣而優(yōu)美的方式輕松地比較這三個(gè)數(shù)字變量。

要?jiǎng)?chuàng)建的氣泡圖

跨平臺(tái)圖表控件Anychart教程：如何創(chuàng)建JavaScript氣泡圖

建立JavaScript氣泡圖

遵循以下四個(gè)簡(jiǎn)單步驟即可構(gòu)建JavaScript氣泡圖：

創(chuàng)建一個(gè)HTML頁(yè)面。
添加必要的腳本。
加載將可視化的數(shù)據(jù)。
繪制圖表。

1、創(chuàng)建一個(gè)HTML頁(yè)面

我們需要做的第一件事是設(shè)置一個(gè)HTML頁(yè)面以及添加一個(gè)HTML容器來(lái)承載我們的數(shù)據(jù)可視化。這樣做如下：

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

我想在這里強(qiáng)調(diào)兩件事。首先也是最重要的是div，我已經(jīng)命名了一個(gè)元素container。這是一個(gè)塊級(jí)元素，我們將在其中繪制圖表。

其次，我編寫(xiě)了CSS規(guī)則來(lái)管理容器元素的外觀。這些特定的規(guī)則將確保我們基于JavaScript的氣泡圖占據(jù)整個(gè)頁(yè)面。

2、添加必要的腳本

列表上的第二項(xiàng)是添加必要的腳本。

我們將使用AnyChart JS Charts庫(kù)，該庫(kù)將使我們能夠快速輕松地構(gòu)建可視化文件。它是一種輕量級(jí)，強(qiáng)大而靈活的制圖解決方案，可供非營(yíng)利組織免費(fèi)使用。

為了使用AnyChart，我們需要引用其基本腳本。當(dāng)我們從外部JSON源加載數(shù)據(jù)時(shí)，我們還應(yīng)該引用AnyChart的數(shù)據(jù)適配器腳本。

<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、加載我們將要可視化的數(shù)據(jù)

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

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

在我們的情況下，我們需要使用以下代碼來(lái)加載數(shù)據(jù)：

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

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

4、繪制圖表

最后，我們開(kāi)始繪制圖表。

整個(gè)圖表代碼必須寫(xiě)在anychart.onDocumentReady()函數(shù)中。加載頁(yè)面時(shí)執(zhí)行此功能。

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

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();

  })

});

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

想要購(gòu)買(mǎi)Anychart正版授權(quán)的朋友可以

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