Qt使用ECharts画柱状图并与JS通信

最新推荐文章于 2023-01-10 02:03:50 发布
最新推荐文章于 2023-01-10 02:03:50 发布
阅读量606 收藏 2
点赞数 1
分类专栏： c++ QT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALONE_WORK/article/details/104654627
版权
c++ 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
QT
36 篇文章 9 订阅
订阅专栏

原文：http://beself.top/2020/03/04/qt-echarts-js-communication/
本文是基于一个实例Demo:Qt使用ECharts画柱状图并与JS通信，并将源码已经上传至码云(gitee)
源码地址： https://gitee.com/ALONE_WORK/QtCeShiXiangMu/tree/master/EChartDemo

感谢网上好多前辈的博文，也是研究了好久才弄出来的

效果展示图

在这里插入图片描述

注意点

  1. 在做demo时遇到些问题，比如使用QWebEngineView来访问远程地址时操作一会后，程序自动崩溃，到现在不知道是怎么回事
  2. 本次实例使用了Qt5.13
  3. 本次编译器使用MSVC2017_32位
  4. demo使用QWebChannel库来进行Qt与JS间进行通信
  5. 本次实验还有一个点比较迷惑，在关闭程序是会有一个错误提示信息（[43336:35564:0304/150548.956:ERROR:process_win.cc(168)] Unable to terminate process: 拒绝访问。 (0x5)）虽然暂时还不知道对程序有没有影响，但是心理始终有点疑惑
  6. 源码已经上传，感兴趣的下载研究
ALONE_WORK
关注
专栏目录
Qt QChart 图表库详解及使用
MusicScore的博客
07-08 439
Qt Charts 是 Qt 提供的一个附加模块，用于创建和管理各种类型的图表。丰富的图表类型：折线图、柱状图、饼图、散点图等。高度可定制的样式和布局。支持多轴绘图和实时更新。提供交互功能，如缩放、平移和选择。// 创建第一条折线图数据系列// 创建第二条折线图数据系列// 创建图表对象// 自定义坐标轴// 显示图例// 创建图表视图Qt Charts 是一个功能强大的图表库，适用于各种数据可视化需求。
Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
Bejpse的博客
08-02 851
上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。...
Qt图表eCharts
雨田哥的博客
12-11 3261
Qt之图表-eCharts Qt之图表-eCharts 简述 效果图 代码 结尾简述 最近，因某些需要，做了一个图表，这里用的是第三方的JS库，很强大，ECHARTS，应用起来很方便，功能很多，这里我贴出了，API文档。 效果图代码option = { //颜色组 color:['#00A1FF','#FF7700'], //提示框 tooltip: {
qt 使用 echarts
活到老、学到老
09-21 5184
Echarts 是一个web的图表库，包含各种图表，如饼图、柱状图、折线图、雷达图、散点图、关系图、盒图....非常多，每一种图表都有对应的demo,直接下载根据自己的需求进行改造，界面非常炫酷，代码简单。 官网地址：http://www.echartsjs.com/index.html 下载对应版本的SDK。 完整项目下载地址：https://download.csdn.net/downloa...
Qt之QWebEngineView调用Echarts方法
ISmileLi的博客
12-24 7538
最近在做Qt绘制散点图和统计图的方法，顺便研究了一下Qt中使用Echarts的方法，Echarts功能很强大，Qt中调用其他也很方便。我使用的是Qt5.6版本中的QWebEngineView显示Echarts图的，Qt5.4（包括5.4）之前的版本是使用QWebView进行显示的，方法都是一样的。测试代码写的比较简单，只是为了说明使用。一、效果图如下： 效果图中的html代码是从官网中直接粘贴下来
在QT中集成Echarts
weixin_34226182的博客
12-30 1036
Echarts是百度的可视化图表库(js)，有各种漂亮的折线、饼、柱、雷达、散点图，之前做网页信息图表时就体会到它具有很强大的表达能力（不仅仅是展示数据，更重要的是表达信息），所以很想把它集成到QT中，代替目前手头已开发的软件中的qwt。目标：在QT实现的软件中嵌入Echarts折线图，折线图中的数据、标题等从qt部分传给Echarts的...
qt 使用 echarts图表
04-21
5. **Echarts配置**：Echarts提供了丰富的图表类型，如折线图、柱状图、饼图等。每种图表都有其特定的配置项，如系列（series）、坐标轴（xAxis, yAxis）、图例（legend）等。在JavaScript中，你需要根据需求设置...
ECharts.zip_echarts qt_echarts qt_echarts+qt_qml html5_qt4.85与
07-15
ECharts 是一个基于 JavaScript 的开源可视化库，常用于创建数据驱动的图表，如折线图、柱状图、饼图等。它具有丰富的交互功能和美观的视觉效果，广泛应用于 Web 开发中的数据分析和展示。在给定的 "ECharts.zip" ...
QT与Echart交互生成图形化表格
12-24
QT与Echart交互生成图形化表格是一种常见的技术实践，它结合了C++的QT框架和JavaScript的Echart库，使得开发者能够利用QT的系统级功能和Echart的丰富图表展示能力，实现桌面应用中的可视化数据展示。以下是关于这个...
基于qt5.6与echarts配合打造最强图表库
06-24
ECharts，作为一个流行的JavaScript图表库，支持各种图表类型，如折线图、柱状图、饼图、散点图等，并提供了丰富的自定义选项和动画效果。ECharts可以轻松地嵌入到网页或者Web应用中，但在这个案例中，我们将其集成...
QT笔记：Qt调用Echarts
weixin_43878765的博客
05-21 1647
Echarts简介 Echarts是百度的一个纯Javascript的开源图表库，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现，界面十分漂亮美观。 Echarts下载 [4.7.0下载地址](https://github.com/apache/incubator-e
QT中加入Echarts.rar
10-09
如何在QT中加入Echarts图表，实现可视化数据。这里放入了mian.js和写好的html文件，并在说明文档中说明了如何添加的具体步骤。
qt 使用Echart 绘图
10-25
qt echart 绘图 webview 解决qt4绘图问题
Qt+ECharts 双轴柱状图
阿酷亚莫塔塔的博客
09-23 453
Qt+ECharts 双轴柱状图
Qt echarts 教程（1）：qt echarts的基本使用方法
琅嬛福地
07-01 3160
在使用Qt进行项目开发时，有时会遇到数据采集的需求，需要将数据用动态曲线展示，或者饼状图，树状图等，对于这种动态曲线，可以用成熟的组件，例如QCharts, QCustomPlot, QWT等等，也可以自己绘制，这些都是C++的解决方案，在前端领域，则有更优秀的Echarts来实现动态曲线，本篇博客介绍在Qt项目中如何使用ECharts进行数据展示。 ECharts简介 ECharts是百度的项目，之前的官网是http://echarts.baidu.com 几个月前还能打开，现在百度把它交给阿帕奇了，新
Qt中调用Echarts，定义数据接口，更新Echarts图表数据
wwplh5520370的博客
04-24 1770
格式 JSON：{ series: [ { data: [ ] } ] } option：JSON对象 series：JSON数组 data：JSON数组 1、折线图、柱状图 JS { series: [ { data: [ 150, 230, 224, 218, 135, 147, 260 ] } ] } Qt void setData(QList<int> data)
Qt echarts 教程（2）：qt echarts 数据动态绑定
琅嬛福地
07-01 984
Qt echarts 教程（1）：qt echars的基本使用方法 Qt echarts 教程（2）：qt echars 数据动态绑定 上一篇介绍了qt echars的基本使用方法，本篇介绍如何进行C++ js数据动态绑定。为了弄清楚交互方法，我们从最简单的例子入手line-simple.html，如下所示： html如下： <!DOCTYPE html> <html style="height: 100%"> <head> <meta c
QT Echarts 联动共享数据表图 使用详解
断点
01-10 937
Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。本文作者原创，转载请附上文章出处与本文链接。
用qt画一个柱状图 不使用qtcharts
最新发布
05-20
好的，以下是一个用Qt绘制柱状图的示例代码： ```cpp #include #include #include class BarChart : public QWidget { public: BarChart(QWidget *parent = nullptr) : QWidget(parent) { setFixedSize(400,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ALONE_WORK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值