开始使用billboard.js图表

billboard.js 是一个便于在图表中实现数据可视化的JavaScript库，它基于D3 V4+。，使开发人员更容易即时实现数据可视化，而不需要编写大量的模板代码。billboad.js

前提条件

在你的电脑上安装[Node.js]。
在你的电脑上安装[Npm]。
[Javascript]和[HTML]知识。

项目设置

创建一个名为charts 的项目目录。
在上面创建的charts 目录中，创建一个新的HTML文件，名为index.html 。

安装billboard.js

billboard.js 可以通过两种方式添加到项目中。

手动下载从billboard.js的官方网站下载billboad.js 文件。将下载的CSS和Javascript文件添加到我们上面创建的chart 目录中。

在index.html ，将下面的代码片段添加到页眉部分。

   <!-- Load D3.js -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Load billboard.js -->
    <script src="billboard.js"></script>

    <!-- Load style -->
    <link rel="stylesheet" href="billboard.css">

通过npm进行安装：要通过npm把billboard.js 安装到我们的项目中，我们必须在我们项目的根目录下初始化npm。

将当前终端目录改为我们的项目目录。
执行下面的命令来创建package.json 和package.lock.json 文件，这些文件被Node.js用来管理添加到Node.js应用程序的外部库。

    $ npm init

要通过npm将billboard.js 安装到我们的项目中，执行下面的命令。

    $ npm install billboard.js

billboard.js中支持的图表类型

billboard.js 支持各种各样的图表。下面是支持的某些图表类型。billboard.js

Chart types

使用billboard.js创建图表

在本节中，我们将使用billboard.js创建一个简单的图表。

在我们上面创建的项目文件夹中创建一个HTML文件名chart.html 。
将下面的代码片段添加到chart.html 文件中。

   <!DOCTYPE html>

    <title>billboard.js application</title>

    <head>
    <!-- loading billboard.js styles from the cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">

    <!--Loading D3.js -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- Loading billboard.js scripts from the cdn --> 
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
    </head>
    <body>

    </body>

    </html>

在我们上面创建的chart.html 文件中的body 标签中创建一个div ，其ID为charting 。

   <div id="charting"></div>

在项目根目录下创建一个名为charting.js 的文件，并添加下面的代码片断。

   bb.generate({
    bindto: "#charting",
    data: {
        columns: [
            ["Java", 10, 320, 400, 210, 90, 210],
            ["Python", 310, 200, 210, 24, 220, 30]
        ],
        types: {
          Java: "area-spline",
          Python: "step"
        },
        colors: {
          Java: "blue",
          Python: "green"
        }
    }
    });

bb.generate({}) 用传递给它的参数生成一个图表。
bindto: "#charting" 持有 id，该图表将在我们的HTML文件中显示。div
data 持有一个对象，包含创建图表所需的所有信息。
columns 持有将被绘制成图表的数据。
types 表示要使用的图表的类型。在我们的图表中，我们在Java中使用线图，在Python中使用步骤图。
colors 指定每个数据将以何种颜色呈现。

将charting.js 脚本添加到chart.html 文件的底部，body 标签。

   <script src="charting.js"></script>

绘制出下图所示的图表。

Chart Image

使用billboard.js显示分类数据

当需要显示一大组数据时，那么将它们分类显示就变得很方便。

在我们之前创建的chart.html 文件中创建一个ID为categorical 的div 。
在项目目录中创建一个名为categorical.js 的Javascript文件。
将下面的代码片段添加到上面创建的文件中。

   var chart = bb.generate({
    bindto: "#categorical",
    data: {
    x: "x",
    columns: [
        ["x", "www.siteone.com", "www.sitetwo.com", "www.sitethree.com", "www.sitefour.com"],
        ["downloads", 50, 100, 200, 600],
        ["uploads", 80, 110, 150, 220]
    ],
    groups: [
      [
        "downloads",
        "loading"
      ]
    ],
        colors: {
          downloads: "blue",
          uploads: "green"
        },
    type: "bar",
    },
    axis: {
        x: {
        type: "category"
        }
    },
    bindto: "#categoryData"
    });

上面的分类数据就会显示在图表中，如下图所示。

Image with Categorical data

billboard.js中的图表主题

billboard.js 自带各种主题，其中一些包括。

graph
datalab
insight
default

要使用上述主题，请将billboard.js 提供的CSS文件加载到你的HTML文件中，如下图所示。

<link rel="stylesheet" href="
https://naver.github.io/billboard.js/release/latest/dist/theme/insight.css">

总结

现在你已经学会了如何将billboard.js 集成到Node.js应用程序中。

如何使用billboard.js图表