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-chartscd 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-urinetworks:  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 -

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

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

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

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 和形容

3.4 新增一个Chart

3.4.1 抉择一个Collections

3.4.2 抉择Chart Type

就是你要的图表类型

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 页面中去，对着官网文档一步步来就能够了还是很简略的加油吧！