QT-通过加载JS脚本文件显示常用图表（折线，柱状，圆饼等）

最新推荐文章于 2024-07-10 03:45:42 发布

进击的大海贼

最新推荐文章于 2024-07-10 03:45:42 发布

阅读量1.7k

点赞数 3

分类专栏： Qt JavaScript 文章标签： c++ javascript

本文链接：https://blog.csdn.net/u013083044/article/details/113516337

版权

Qt 同时被 2 个专栏收录

75 篇文章 32 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

QT通过加载JS脚本文件显示常用图表（折线，柱状，圆饼等）

1、效果预览查看
2、初始化窗体，准备脚本文本
3、 JS函数与QT接口数据交互
4、关键头文件和源文件
5、本次实例代码下载链接

1、效果预览查看

在这里插入图片描述

2、初始化窗体，准备脚本文本

JS文件的修改，需要对JS最基本的认识，对应Javascript的学习，可以尝试此链接进行学习 https://www.w3school.com.cn/js/index.asp
其他更多优秀的样式JS文件，可以通过参考网址：https://www.echartsjs.com/zh/index.html 进行研究学习
这里贴出其中折线图JS文本，全部代码请从博文最后根据链接下载


<html>
<head>
    <meta charset="utf-8">
    <title>折线图</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.min.js"></script>
<!--    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>-->
</head>
<body>
    <div id="main" style="height:420px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        option = {
             tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高气温', '最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: "最高气温",
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            },
            {
                name: "最低气温",
                data: [420, 732, 601, 734, 1390, 1530, 1120],
                type: 'line'
            }]
        };

        myChart.setOption(option);
        window.onresize = myChart.resize;

        // 定义函数，QT修改测试值
        function setDatas(str){
            var obj = JSON.parse(str);

            console.info(obj)

            option.series[0].data =  obj.series1;
            option.series[1].data =  obj.series2;

            myChart.setOption(option);
        };
    </script>
</body>
</html>

3、 JS函数与QT接口数据交互

本实例通过自动生成测试数据来应用JS数据的更改，具体见如下代码。

// 生成测试数据
void cJsViewWidget::slotBtnCreatTestData()
{
    QVariantMap map;
    QVariantList varList1,varList2;

    for(int i=0;i<7;++i)
	{
        varList1 << (qrand() % 1000 );
        varList2 << (qrand() % 1000 );
    }

    map["series1"] = varList1;
    map["series2"] = varList2;

    QJsonDocument doc = QJsonDocument::fromVariant(map);
    QString str = doc.toJson(QJsonDocument::Compact);
    str.replace(QRegExp("\""), "\\\"");
    QString strVal = QString("setDatas(\"%1\");").arg(str);

	// 运行脚本
    ui->webview1->page()->runJavaScript(strVal);
}

JS方法函数，用来开放给QT修改数据

        // 定义函数，QT修改测试值
        function setDatas(str){
            var obj = JSON.parse(str);

            console.info(obj)

            option.series[0].data =  obj.series1;
            option.series[1].data =  obj.series2;

            myChart.setOption(option);
        };
    </script>

4、关键头文件和源文件

// 头文件
#pragma  once
#include <QWidget>

namespace Ui {
class JsViewWidget;
}

class cJsViewWidget : public QWidget
{
    Q_OBJECT

public:
    explicit cJsViewWidget(QWidget *parent = nullptr);
    ~cJsViewWidget();

private slots:
    void slotComboBoxChangeIndex(int index);
    void slotBtnCreatTestData();

private:
    Ui::JsViewWidget *ui;
};

// 源文件
#include "JsViewWidget.h"
#include "ui_JsViewWidget.h"

#include <QVariantMap>
#include <QJsonDocument>
#include <QDateTime>
#include <QtMath>

cJsViewWidget::cJsViewWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::JsViewWidget)
{
    ui->setupUi(this);

	// 添加下拉框单元项
	QStringList strNamesList{QString::fromLocal8Bit("折线图")
	,QString::fromLocal8Bit("柱状图") 
	,QString::fromLocal8Bit("饼状图")
	,QString::fromLocal8Bit("雷达图") 
	,QString::fromLocal8Bit("散点图") 
	,QString::fromLocal8Bit("仪表盘") 
	,QString::fromLocal8Bit("关系图") 
	,QString::fromLocal8Bit("中国地图") 
	,QString::fromLocal8Bit(" 省地图")
	};

	ui->comboBox->addItems(strNamesList);
    slotComboBoxChangeIndex(0);

	// 建立信号连接
	connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(slotBtnCreatTestData()));
	connect(ui->comboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(slotComboBoxChangeIndex(int)));
}

cJsViewWidget::~cJsViewWidget()
{
    delete ui;
}

// 下拉框槽函数
void cJsViewWidget::slotComboBoxChangeIndex(int index)
{
    ui->pushButton->setVisible(index == 0);

	// 加载脚本数据
    QString url = QString("qrc:/html/view%1.html").arg(index+1);
    ui->webview1->load(QUrl(url));
}

// 生成测试数据
void cJsViewWidget::slotBtnCreatTestData()
{
    QVariantMap map;
    QVariantList varList1,varList2;

    for(int i=0;i<7;++i)
	{
        varList1 << (qrand() % 1000 );
        varList2 << (qrand() % 1000 );
    }

    map["series1"] = varList1;
    map["series2"] = varList2;

    QJsonDocument doc = QJsonDocument::fromVariant(map);
    QString str = doc.toJson(QJsonDocument::Compact);
    str.replace(QRegExp("\""), "\\\"");
    QString strVal = QString("setDatas(\"%1\");").arg(str);

	// 运行脚本
    ui->webview1->page()->runJavaScript(strVal);
}

5、本次实例代码下载链接

全部代码下载链接: https://download.csdn.net/download/u013083044/14982917

进击的大海贼

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
5
评论
QT-通过加载JS脚本文件显示常用图表（折线，柱状，圆饼等）

QT通过加载JS脚本文件显示常用图表（折线，柱状，圆饼等）1、效果预览查看2、初始化窗体，准备脚本文本3、 JS函数与QT接口数据交互4、关键头文件和源文件5、本次实例代码下载链接1、效果预览查看2、初始化窗体，准备脚本文本JS文件的修改，需要对JS最基本的认识，对应Javascript的学习，可以尝试此链接进行学习 https://www.w3school.com.cn/js/index.asp其他更多优秀的样式JS文件，可以通过参考网址：https://www.echartsjs.com/
复制链接

扫一扫