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