作者:Aska小强
来源:SegmentFault 思否
最近发现了个有意思的东西,MongoDB Charts ,它是MongoDB官方提供的 用于图表展示MongoDB数据的 效果图:
附上我下载的文件
如果输入错误 会有提示 而且很详细
至此 MongoDB Charts 已经安装并且成功运行了,下面开始讲解 如何使用 MongoDB Charts 去创建图表等
- END -
最近发现了个有意思的东西,MongoDB Charts ,它是MongoDB官方提供的 用于图表展示MongoDB数据的 效果图:
![89ffed823e5756671b146cbaed6e8904.png](https://i-blog.csdnimg.cn/blog_migrate/b6b13397ef000d03a36d2523b9e9dae5.png)
1.什么是MongoDB Charts
MongoDB Charts最强大的功能之一是其内置的 聚合功能。聚合允许您通过各种指标处理收集数据,并执行平均值和标准差等计算,以进一步了解您的数据。 并且它提供了Embed Chart 功能 方便嵌入到你自己Web程序中2.安装和运行MongoDB Charts
安装过程步骤挺多的,但是对着官方教程一步步来 还是很简单的 官方MongoDB Charts 安装文档: https://docs.mongodb.com/charts/onprem/installation/![a5a1d90ed4bff88d54e034c339c28179.png](https://i-blog.csdnimg.cn/blog_migrate/7ad14b5770c359cb7e5c616400284d3b.png)
2.1 准备环境
- Mac/Linux 系统
- Docker version 18.09.1
- MongoDB shell version v4.2.0
2.2 创建一个目录存储图表配置
mkdir mongodb-charts
cd mongodb-charts
2.3 下载MongoDB Charts Docker Compose file
https://www.mongodb.com/download-center/charts Dokcer Compose file: https://www.mongodb.com/download-center/chart![43f07148b0a17d45b381f9d99360eb5d.png](https://i-blog.csdnimg.cn/blog_migrate/eaa2165ec4d63feaea877b62feb4e1c6.png)
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 :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://:@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'
正确案例:
![260639a194d148045a263e7a9ff989c0.png](https://i-blog.csdnimg.cn/blog_migrate/87aebf26844b1565d5d5ed9e5f99bac8.png)
2.7 创建一个Docker secret 为MongoDB Charts
官方案例:echo "" | 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 "" --last-name "" \
--email "" --password "" \
--role ""
Windows 官方案例
docker exec -it `
$(docker container ls --filter name=_charts -q) `
charts-cli add-user --first-name "" --last-name "" `
--email "" --password "" `
--role ""
就是输入 登录的账号 密码 以及权限等
![33eae11647ca7fdff10b537816364fc8.png](https://i-blog.csdnimg.cn/blog_migrate/51a61d5bc8bb821872cf4731403ce392.png)
![91f093689e3260696865e17af543910a.png](https://i-blog.csdnimg.cn/blog_migrate/693d6f79e5b96978907286c39978498d.png)
2.11 直接访问 Compose file 里配置的端口
默认 - 80:80 端口 直接访问 localhost:80![2995a12e4d4ff87b335d23b45fcfcab5.png](https://i-blog.csdnimg.cn/blog_migrate/7162ff4cd83cb0300654c3ed04b9b945.png)
3. MongoDB Charts 使用
3.1 首先先关联一个 MongoDB 数据源
注意:地址 mongodb://host.docker.internal 不是 mongodb://localhost:27017![10e8ae7fd424b1a81171522f32ca4e2c.png](https://i-blog.csdnimg.cn/blog_migrate/0d4ab4a7bdd0210d42f40057e30178d2.png)
3.2 选择一个MongoDB数据库
3.3 在Dashboard 一栏New Dashboard
输入 Title 和 描述![2509810c642384f04a5e7f9c143af974.png](https://i-blog.csdnimg.cn/blog_migrate/5619cd6855bc97810e92a0f92711249d.png)
![cc7bcc367426fdd6fdfa365b7c9b18a0.png](https://i-blog.csdnimg.cn/blog_migrate/a1a78208dd8542625d3b4eb61a6e4330.png)
3.4 新增一个Chart
3.4.1 选择一个Collections
3.4.2 选择Chart Type
![af8c34769def191efbd06a11dc5d6ba8.png](https://i-blog.csdnimg.cn/blog_migrate/e116862ec0cf2d397aa03a4f8b5b2eb0.png)
3.4.3 需求:根据订单状态 去统计图表
![456862ec5dc41828fd369fadd51db9c6.png](https://i-blog.csdnimg.cn/blog_migrate/7db91170b9ffdf4346b081da1075fa00.png)
4. Embed Chart 导出你的图表 嵌入到自己的Web环境
4.1 保存你设置好的图表后
选择Embed Chart![8102547f6a4194b29770da9b9af276f1.png](https://i-blog.csdnimg.cn/blog_migrate/5fdae2ac4be1829a3a92608b8290a485.png)
4.2 开启匿名访问图表 并且复制 Embed Code
可以看到它会提供一段代码,只要复制这段代码到自己的环境中去即可![d17bdb77c0ed5c2e6a81d19decb98777.png](https://i-blog.csdnimg.cn/blog_migrate/f3dc8e9b84b57c93cc292c9a72fed73c.png)
4.3 创建HTML 文件
mongo-charts
Mongodb-Charts
Mongodb-Charts
效果图:
![82bc9a680b542cc701b7b2af1e01e362.png](https://i-blog.csdnimg.cn/blog_migrate/e2e2420a059336543c79201a79a9fa01.png)
5. 总结
本篇主要讲解 MongoDB Charts 的安装以及如何运行它 ,并且简单介绍了一下 如何使用 MongoDB Charts 去绘制一个图表,最后讲解了 如何导出你的图表并且嵌入到自己的HTML 页面中去 , 对着官方文档一步步来就可以了 还是很简单的 加油吧!- END -