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

最新推荐文章于 2024-04-19 21:27:11 发布
最新推荐文章于 2024-04-19 21:27:11 发布
阅读量581 收藏 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
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
Bejpse的博客
08-02 822
上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。...
Qt用ECharts绘制饼状图（Qt与JS交互）——Qt
xiaopei_yan的博客
02-20 2642
一、前言 又换工作了，再次回到Qt的怀抱，感觉过去半年多一点成长都没有。唉，郁闷。 回到正题，这次项目涉及到的东西很杂，其中涉及到了要绘制图表，我之前用的比较熟练的是Qt自带的QtChart，但这次Qt开发工具是5.5版本的，而 5.7才自带这个工具；所以根据当时的资源，选择了ECharts，上手快，图表类型多，又好看。 虽然，不是第一次用ECharts，但是也和第一次差不多，之前只涉及到了...
QT Echarts 使用详解（二）ECharts柱状图\交互
断点
10-29 1947
Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。
【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等
最新发布
LF__plus的博客
04-19 1350
【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等
Qt+ECharts 双轴柱状图
阿酷亚莫塔塔的博客
09-23 401
Qt+ECharts 双轴柱状图
使用TerminateProcess结束进程时，错误码为5的解决方法
System Architect
04-16 8577
最近写一个守护进程的程序，发现目标进程挂起后，j
QT5百度地图开发学习——qt调用JavaScript函数并传参
qq_40420104的博客
11-04 2647
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
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的丰富图表展示能力，实现桌面应用中的可视化数据展示。以下是关于这个...
QT与echart图实现动态实时刷新视图.rar
05-10
ECharts是一个由百度开源的JavaScript图表库，支持丰富的图表类型，如柱状图、折线图、饼图等，同时提供了丰富的交互功能，如拖拽重算、鼠标悬停提示等。在QT中集成ECharts，可以让C++应用拥有强大的数据可视化能力...
qt 利用QWebEngineView和QWebChannel使用echarts图表
亦轩的专栏
09-08 1853
======博客点滴积累，部分话语和知识点来源于网络，感谢网络资源的提供者====== QWebengine目前只支持msvc，不支持mingw。安装qt 是需要注意勾选；Webenginewidgets 是创建widgets部件的web 程序，Webchannel 是通信类，可以实现qt 与js 的通信。 第一步：故实现需要在pro 文件添加这两个类 QT ...
QT/QMl结合Echarts绘图
03-29 1263
https://blog.csdn.net/silence__star/article/details/84304921
Qt6 QML Book/图形效果/定向粒子
aggs1990的专栏
01-27 203
Directed Particles 定向粒子 We have seen particles can rotate. But particles can also have a trajectory. The trajectory is specified as the velocity or acceleration of particles defined by a stochastic direction also named a vector space. 我们已经看到粒子可以旋转。但粒子也可
QML中QCharts饼图自定义（Doughnut和Nightingale）
龚建波
05-12 4546
0.前言 虽然js的ECharts很好看，但是得嵌一个webengineview，如果是Loader加载的话会很慢，所以我试着用QCharts来自定义一些简单的图表。 UI原型图如下： 最终实现效果如下： 相对来说，没有ECharts的好看，花样也少，而且要定制效果更好的话得参考源码从C++入手改。比较坑的是hover只有true和false两个状态，没有鼠标坐标，没法做标...
在qml中加载ECharts
qq_27081181的博客
09-03 2885
在qml中加载Echarts绘制图表有以下几个步骤： 1：在ECharts官网下载echarts-all.js 下载地址：https://echarts.baidu.com/echarts2/doc/example.html 2：根据官方实例，https://echarts.baidu.com/echarts2/doc/example.html选择自己需要的图例，如折线图、柱状图、饼图、k线图...
C++图形用户界面开发框架Qt 6.x- QML中的可视化元素
linjingyg的博客
11-13 302
　　Qt官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网 　　对于最基本的可视化效果，Qt Quick提供了一个Rectangle 类型来绘制矩形，这些矩形可以用颜色或垂直渐变着色，Rectangle 类型还可以在矩形上绘制边框。 　　要绘制矩形以外的自定义形状，请参阅Canvas类型或使用 Image 类型显示预渲染图像。 　　import QtQuick 　　Item { 　　width: 320 　　height: 480 　　Rectangle { 　　color
技术小新 | QtCharts快速入门
AMOVLAB(阿木实验室)
03-25 4472
一、QtCharts   QtCharts是Qt自带的组件库，其中包含折线、曲线、饼图、棒图、散点图、雷达图等各种常用的图表。而在地面站开发过程中，使用折线图可以对无人机的一些状态数据进行监测，更是可以使用散点图来模拟飞机所在位置，实现平面地图的感觉。   使用Qt Charts绘制，大概可以分为四个部分：数据(QXYSeries)、图表(QChart)、坐标轴(QAbstractAXis)和视图(QChartView)。这里就不一一给大家介绍了，下面给大家说一下Qt
Qt Charts
x13262608581的博客
10-07 2315
Charts
用qt画一个柱状图 不使用qtcharts
05-20
好的，以下是一个用Qt绘制柱状图的示例代码： ```cpp #include <QApplication> #include <QWidget> #include <QPainter> class BarChart : public QWidget { public: BarChart(QWidget *parent = nullptr) : QWidget(parent) { setFixedSize(400, 300); } protected: void paintEvent(QPaintEvent *) override { QPainter painter(this); const int margin = 30; const int barWidth = (width() - 2 * margin) / m_values.size() - 10; const int maxValue = *std::max_element(m_values.begin(), m_values.end()); const int maxHeight = height() - 2 * margin; painter.setPen(Qt::black); painter.drawLine(margin, margin, margin, height() - margin); // y-axis painter.drawLine(margin, height() - margin, width() - margin, height() - margin); // x-axis for (int i = 0; i < m_values.size(); ++i) { int barHeight = static_cast<int>(m_values[i] * maxHeight / maxValue); int x = margin + i * (barWidth + 10); int y = height() - margin - barHeight; QRect rect(x, y, barWidth, barHeight); painter.fillRect(rect, Qt::blue); painter.drawRect(rect); } } public: void setValues(const std::vector<int>& values) { m_values = values; update(); } private: std::vector<int> m_values; }; int main(int argc, char *argv[]) { QApplication a(argc, argv); BarChart chart; chart.setValues({ 10, 20, 30, 40, 50 }); chart.show(); return a.exec(); } ``` 在示例代码中，我们继承了QWidget类，并重写了paintEvent函数进行绘图。我们使用QPainter类来绘制柱状图。在paintEvent函数中，我们首先绘制了x轴和y轴。然后，我们根据数据值绘制柱状图。为了让柱状图看起来更好，我们给每个柱子留出了一定的空白。最后，我们通过调用update函数来刷新界面，使柱状图显示出来。 你可以根据需要修改该示例代码以满足你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ALONE_WORK

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

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

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

打赏作者

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

抵扣说明：

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

余额充值