跨平台图表控件Anychart教程：如何创建JavaScript气泡图（上）-控件新闻-慧都网

跨平台图表控件Anychart教程：如何创建JavaScript气泡图（上）

翻译|使用教程|编辑：吴园园|2020-03-09 17:02:21.270|阅读 401 次

概述：在本教程中，我将教您如何构建自己的交互式JS气泡图并通过自定义实现它。所有示例都将提供完整代码。

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：

点击下载Anychart最新试用版

您是否曾经想过使用JavaScript创建气泡图，但不知道如何？继续阅读以了解有关气泡图的更多信息，以及如何快速轻松地构建气泡图。

气泡图是散点图的扩展。最常见的是，它们显示三个变量，分别表示为点的水平距离（x），点的垂直距离（y）和点的大小（z）。气泡图是一种很棒的可视化技术，可让用户比较数据点。如果设计得当，它确实可以吸引眼球并引人入胜。

在本教程中，我将教您如何构建自己的交互式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="//cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="//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正版授权的朋友可以

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼