MongoDB Charts 装置和应用

最近发现了个有意思的货色，MongoDB Charts，它是 MongoDB 官网提供的 用于图表展现 MongoDB 数据的

效果图：

1. 什么是 MongoDB Charts

MongoDB Charts 最弱小的性能之一是其内置的 聚合性能。聚合容许您通过各种指标解决收集数据，并执行平均值和标准差等计算，以进一步理解您的数据。

并且它提供了 Embed Chart 性能 不便嵌入到你本人 Web 程序中

2. 装置和运行 MongoDB Charts

装置过程步骤挺多的，然而对着官网教程一步步来 还是很简略的

官网 MongoDB Charts 装置文档

2.1 筹备环境

• Mac/Linux 零碎
• Docker version 18.09.1
• MongoDB shell version v4.2.0

因为 MongoDB Charts 须要应用 Docker 装置，所以须要有 Dokcer 环境

2.2 创立一个目录存储图表配置

mkdir mongodb-charts
cd mongodb-charts

2.3 下载 MongoDB Charts Docker Compose file

https://www.mongodb.com/downl…

Dokcer Compose file

附上我下载的文件

version: '3.3'

services:
  charts:
    image: quay.io/mongodb/charts:19.12.1
    hostname: charts
    ports:
      # host:container port mapping. If you want MongoDB Charts to be
      # reachable on a different port on the docker host, change this
      # to <port>:80, e.g. 8888:80.
      - 80:80
      - 443:443
    volumes:
      - keys:/mongodb-charts/volumes/keys
      - logs:/mongodb-charts/volumes/logs
      - db-certs:/mongodb-charts/volumes/db-certs
      - web-certs:/mongodb-charts/volumes/web-certs
    environment:
      # The presence of following 2 environment variables will enable HTTPS on Charts server.
      # All HTTP requests will be redirected to HTTPS as well.
      # To enable HTTPS, upload your certificate and key file to the web-certs volume,
      # uncomment the following lines and replace with the names of your certificate and key file.
      # CHARTS_HTTPS_CERTIFICATE_FILE: charts-https.crt
      # CHARTS_HTTPS_CERTIFICATE_KEY_FILE: charts-https.key

      # This environment variable controls the built-in support widget and
      # metrics collection in MongoDB Charts. To disable both, set the value
      # to "off". The default is "on".
      CHARTS_SUPPORT_WIDGET_AND_METRICS: 'on'
      # Directory where you can upload SSL certificates (.pem format) which
      # should be considered trusted self-signed or root certificates when
      # Charts is accessing MongoDB servers with ?ssl=true
      SSL_CERT_DIR: /mongodb-charts/volumes/db-certs
    networks:
      - backend
    secrets:
      - charts-mongodb-uri

networks:
  backend:

volumes:
  keys:
  logs:
  db-certs:
  web-certs:

secrets:
  charts-mongodb-uri:
    external: true

2.4 Enable Docker Swarm mode

docker swarm init

2.5 拉取 MongoDB Charts image 镜像

对应你下载的 Docker Compose file 版本

docker pull quay.io/mongodb/charts:19.12.1

2.6 测试连贯到 MongoDB 数据库

官网示例

docker run --rm quay.io/mongodb/charts:19.12.1 charts-cli test-connection 'mongodb://<username>:<password>@host.docker.internal'

我的 mongo 在本地 留神这里不能应用 localhost, 要应用 host.dokcer.internal

docker run --rm quay.io/mongodb/charts:19.12.1 charts-cli test-connection 'mongodb://host.docker.internal'

正确案例：

谬误案例:

2.7 创立一个 Docker secret 为 MongoDB Charts

官网案例:

echo "<Verified connection string URI from step 5>" | docker secret create charts-mongodb-uri -

我的输出:

echo "mongodb://host.docker,internal" | docker secret create charts-mongodb-uri -

<img src=”http://cdn.askajohnny.com/image-20200421193557883.png” alt=”image-20200421193557883″ style=”zoom:150%;” />

2.8 运行 MongoDB Charts 容器

docker stack deploy -c charts-docker-swarm-19.12.1.yml mongodb-charts

2.9 查看运行状态

docker service ls

2.10 创立 MongoDB Charts 拜访 Users 账号

MAC/Linux 官网案例:

docker exec -it \
  $(docker container ls --filter name=_charts -q) \
  charts-cli add-user --first-name "<First>" --last-name "<Last>" \
  --email "<user@example.com>" --password "<Password>" \
  --role "<UserAdmin|User>"

Windows 官网案例

docker exec -it `
  $(docker container ls --filter name=_charts -q) `
  charts-cli add-user --first-name "<First>" --last-name "<Last>" `
  --email "<user@example.com>" --password "<Password>" `
  --role "<UserAdmin|User>"

就是输出 登录的账号 明码 以及权限等

<img src=”http://cdn.askajohnny.com/image-20200421195802998.png” alt=”image-20200421195802998″ style=”zoom:200%;” />

如果输出谬误 会有提醒 而且很具体

2.11 间接拜访 Compose file 里配置的端口

默认 - 80:80 端口

间接拜访 localhost:80

至此 MongoDB Charts 曾经装置并且胜利运行了，上面开始解说 如何应用 MongoDB Charts 去创立图表等

3. MongoDB Charts 应用

3.1 首先先关联一个 MongoDB 数据源

留神：地址 mongodb://host.docker.internal 不是 mongodb://localhost:27017

3.2 抉择一个 MongoDB 数据库

3.3 在 Dashboard 一栏 New Dashboard

输出 Title 和 形容

<img src=”http://cdn.askajohnny.com/image-20200421200543195.png” alt=”image-20200421200543195″ style=”zoom:150%;” />

<img src=”http://cdn.askajohnny.com/image-20200421200555021.png” alt=”image-20200421200555021″ style=”zoom:150%;” />

3.4 新增一个 Chart

3.4.1 抉择一个 Collections

3.4.2 抉择 Chart Type

就是你要的图表类型

<img src=”http://cdn.askajohnny.com/image-20200421211532638.png” alt=”image-20200421211532638″ style=”zoom:200%;” />

3.4.3 需要：依据订单状态 去统计图表

拖拽你要分组得 字段 并且按 id 进行 count 计算

并且能够增加过滤条件 以及一些自定义的设置（如 图表里显示的 label）

4. Embed Chart 导出你的图表 嵌入到本人的 Web 环境

4.1 保留你设置好的图表后

抉择 Embed Chart

4.2 开启匿名拜访图表 并且复制 Embed Code

能够看到它会提供一段代码，只有复制这段代码到本人的环境中去即可

4.3 创立 HTML 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mongo-charts</title>
</head>
<body>
 
     <h1>Mongodb-Charts </h1>
    <br/>
 
    <iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="http://localhost/mongodb-charts-qmqli/embed/charts?id=8a2839dc-2046-4854-8329-64958f7ba6da&tenant=a2c5a4d8-e1dc-4499-b8ac-9340a7d85399&theme=light"></iframe>
 
</body>
</html>

效果图：

5. 总结

本篇次要解说 MongoDB Charts 的装置以及如何运行它，并且简略介绍了一下 如何应用 MongoDB Charts 去绘制一个图表，最初解说了 如何导出你的图表并且嵌入到本人的 HTML 页面中去，对着官网文档一步步来就能够了 还是很简略的 加油吧！