QT通過加載JS腳本文件顯示常用圖表（折線，柱狀，圓餅等）
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