九、Qt图表使用

news2025/2/4 15:05:51

一、QCharts概述

Qt图表提供了:折线图、样条曲线图、面积图、散点图、条形图、饼图、方块胡须图、蜡烛图、极坐标图。

1、QChart介绍

Qt Charts基于Qt的QGraphics View架构,其核心组件是QChartView和QChart
  • QChartView是显示图标的视图,基类为QGraphicsView
  • QChart的基类是QGraphicsItem
QGraphicsItem
	QGraphicsObject
		QGraphicsWidget
			QChart

2、使用

(1)项目管理

在使用Qt Charts模块,必须在项目中配置
QT += charts

(2)类中使用QCharts

在类中使用QCharts,需要在头文件或者源文件分别添加:
#include <QtCharts>
// using namespace QtCharts;
QT_CHARTS_USE_NAMESPACE // 使用宏代替

3、实现程序

(1)创建项目,基于QMainWindow

(2)实现图表

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QChartView>
QT_CHARTS_USE_NAMESPACE
#include <QLineSeries>
#include <QtMath>
#include <QValueAxis>

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

    // 创建图标
    QChartView *chartView = new QChartView(this);
    QChart *chart = new QChart();
    chart->setTitle("简单函数曲线");
    chartView->setChart(chart);
    setCentralWidget(chartView);

    // 创建曲线序列
    QLineSeries *series0 = new QLineSeries;
    QLineSeries *series1 = new QLineSeries;
    series0->setName("Sin曲线");
    series1->setName("Cos曲线");
    chart->addSeries(series0);
    chart->addSeries(series1);

    qreal y0, y1, t = 0, intv = 0.1/*时间间隔*/;
    int cnt = 100;

    for (int i = 0; i < cnt; ++i)
    {
        y0 = qSin(t);
        series0->append(t, y0);
        y1 = qCos(t);
        series1->append(t, y1);
        t += intv;
    }

    //创建坐标轴
    QValueAxis *axisX = new QValueAxis;
    axisX->setRange(0, 10);
    chart->setAxisX(axisX, series0);
    chart->setAxisX(axisX, series1);

    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(-1, 1);
    chart->setAxisY(axisY, series0);
    chart->setAxisY(axisY, series1);
}

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

在这里插入图片描述

二、QChart绘制折线图

1、类继承关系

(1)数据序列类

QAbractSeries
	QAreaSeries
	QBoxPlotSeries
	QAbstractBarSeries
		QBarSeries
		QHorizontalBarSeries
		QHorizontalStackedBarSeries
		QPercentBarSeries
		QStackedBarSeries
	QPieSeries
	QXYSeties
		QLineSeries
			QSplineSeries
		QScatterSeries

(2)坐标轴类

QAbstractAxis
	QValuesAxis
		QCategoryAxis
	QLogValueAxis
	QBarCategoryAxis
	QDataTimeAxis

2、实现程序

在这里插入图片描述

(1)创建项目, 基于QMainwindow

(2)QScrollArea 滚动条

在这里插入图片描述
在这里插入图片描述

(3)添加组件

在这里插入图片描述

(4)添设置画笔的UI和类

在这里插入图片描述

#include "dialogpen.h"
#include "ui_dialogpen.h"

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

    ui->comboBoxLineType->clear();
    ui->comboBoxLineType->addItem("NoPen", 0);
    ui->comboBoxLineType->addItem("SolidLine", 1);
    ui->comboBoxLineType->addItem("DashLine", 2);
    ui->comboBoxLineType->addItem("DotLine", 3);
    ui->comboBoxLineType->addItem("DashDotLine", 4);
    ui->comboBoxLineType->addItem("DashDotDotLine", 5);
    ui->comboBoxLineType->addItem("CustomDashLine", 6);

    ui->comboBoxLineType->setCurrentIndex(1);
}

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

QPen DialogPen::getPen()
{
    m_pen.setStyle(Qt::PenStyle(ui->comboBoxLineType->currentIndex()));
    m_pen.setWidth(ui->spinBoxLineWidth->value());
    QColor color = ui->btnLineColor->palette().color(QPalette::Button);
    m_pen.setColor(color);
    return m_pen;
}

QPen DialogPen::getPen(QPen initPen, bool &ok)
{
    QPen pen;
    DialogPen *dlg = new DialogPen;
    dlg->setPen(initPen);
    int ret = dlg->exec();

    if(ret == QDialog::Accepted)
    {
        pen = dlg->getPen();
        ok = true;
    }
    else
    {
        pen = initPen;
        ok = false;
    }

    delete dlg;
    return pen;
}

void DialogPen::setPen(const QPen &pen)
{
    m_pen = pen;
    ui->spinBoxLineWidth->setValue(pen.width());
    int nType = static_cast<int>(pen.style());
    ui->comboBoxLineType->setCurrentIndex(nType);
    ui->btnLineColor->setAutoFillBackground(true);

    QColor color = pen.color();
    QString str = QString::asprintf("background-color: rgb(%d,%d,%d)",
                                    color.red(), color.green(), color.blue());
    ui->btnLineColor->setStyleSheet(str);
}

#include <QColorDialog>
void DialogPen::on_btnLineColor_clicked()
{
    QColor color = m_pen.color();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        QString str = QString::asprintf("background-color: rgb(%d,%d,%d)",
                                        color.red(), color.green(), color.blue());
        ui->btnLineColor->setStyleSheet(str);
    }
}

(5)初始化图表

void MainWindow::createChart()
{
    QChart*chart = new QChart();
    chart->setTitle("简单的曲线");
    ui->chartView->setChart(chart);
    ui->chartView->setRenderHint(QPainter::Antialiasing); // 抗锯齿

    QLineSeries *series0 = new QLineSeries;
    QLineSeries *series1 = new QLineSeries;

    series0->setName("Sin曲线");
    series1->setName("Cos曲线");
    curSeries = series0;

    QPen pen;
    pen.setStyle(Qt::DotLine);
    pen.setWidth(2);
    pen.setColor(Qt::red);
    series0->setPen(pen);

    pen.setStyle(Qt::SolidLine);
    pen.setColor(Qt::blue);
    series1->setPen(pen);

    chart->addSeries(series0);
    chart->addSeries(series1);

    QValueAxis *axisX = new QValueAxis;
    QValueAxis *axisY = new QValueAxis;
    curAxis = axisX;

    axisX->setRange(0, 10);
    axisX->setLabelFormat("%0.1f");
    axisX->setTickCount(11); // 大格间隔数
    axisX->setMinorTickCount(4); // 小格间隔数
    axisX->setTitleText("time(secs)");

    axisY->setRange(-1.2, 1.2);
    axisY->setTickCount(3); // 大格间隔数
    axisY->setMinorTickCount(4); // 小格间隔数
    axisY->setTitleText("value");

    chart->setAxisX(axisX, series0);
    chart->setAxisX(axisX, series1);
    chart->setAxisY(axisY, series0);
    chart->setAxisY(axisY, series1);
}```
### (6)绘制曲线

```bash
void MainWindow::prepareData()
{
    QLineSeries *series0 = (QLineSeries*)ui->chartView->chart()->series().at(0);
    QLineSeries *series1 = (QLineSeries*)ui->chartView->chart()->series().at(1);
    int cnt = 100;
    series0->clear();
    series1->clear();

    qsrand(QTime::currentTime().second());
    qreal t = 0, y0 = 0, y1 = 0, intv = 0.1;
    qreal rd;

    for (int i = 0; i < cnt; ++i)
    {
        rd = (qrand() % 10 - 5);
        y0 = qSin(t) + rd / 50;
        series0->append(t, y0);
        y1 = qCos(t) + rd / 50;
        series1->append(t, y1);
        t += intv;
    }
}

(6)实现组件功能

#include "mainwindow.h"

#include <qchartview.h>
#include "ui_mainwindow.h"
#include "dialogpen.h"

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

    createChart();
    prepareData();
    updateFromChart();
}

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

void MainWindow::createChart()
{
    QChart*chart = new QChart();
    chart->setTitle("简单的曲线");
    ui->chartView->setChart(chart);
    ui->chartView->setRenderHint(QPainter::Antialiasing); // 抗锯齿

    QLineSeries *series0 = new QLineSeries;
    QLineSeries *series1 = new QLineSeries;

    series0->setName("Sin曲线");
    series1->setName("Cos曲线");
    curSeries = series0;

    QPen pen;
    pen.setStyle(Qt::DotLine);
    pen.setWidth(2);
    pen.setColor(Qt::red);
    series0->setPen(pen);

    pen.setStyle(Qt::SolidLine);
    pen.setColor(Qt::blue);
    series1->setPen(pen);

    chart->addSeries(series0);
    chart->addSeries(series1);

    QValueAxis *axisX = new QValueAxis;
    QValueAxis *axisY = new QValueAxis;
    curAxis = axisX;

    axisX->setRange(0, 10);
    axisX->setLabelFormat("%0.1f");
    axisX->setTickCount(11); // 大格间隔数
    axisX->setMinorTickCount(4); // 小格间隔数
    axisX->setTitleText("time(secs)");

    axisY->setRange(-1.2, 1.2);
    axisY->setTickCount(3); // 大格间隔数
    axisY->setMinorTickCount(4); // 小格间隔数
    axisY->setTitleText("value");

    chart->setAxisX(axisX, series0);
    chart->setAxisX(axisX, series1);
    chart->setAxisY(axisY, series0);
    chart->setAxisY(axisY, series1);
}

#include <QTime>
void MainWindow::prepareData()
{
    QLineSeries *series0 = (QLineSeries*)ui->chartView->chart()->series().at(0);
    QLineSeries *series1 = (QLineSeries*)ui->chartView->chart()->series().at(1);
    int cnt = 100;
    series0->clear();
    series1->clear();

    qsrand(QTime::currentTime().second());
    qreal t = 0, y0 = 0, y1 = 0, intv = 0.1;
    qreal rd;

    for (int i = 0; i < cnt; ++i)
    {
        rd = (qrand() % 10 - 5);
        y0 = qSin(t) + rd / 50;
        series0->append(t, y0);
        y1 = qCos(t) + rd / 50;
        series1->append(t, y1);
        t += intv;
    }
}

void MainWindow::updateFromChart()
{
    QChart *chart = ui->chartView->chart();
    ui->lineEditTitle->setText(chart->title());

    QMargins mg = chart->margins();
    ui->spinBoxUp->setValue(mg.top());
    ui->spinBoxDown->setValue(mg.bottom());
    ui->spinBoxLeft->setValue(mg.left());
    ui->spinBoxRight->setValue(mg.right());


}

void MainWindow::on_actZoomIn_triggered()
{
    ui->chartView->chart()->zoom(1.2);
}

void MainWindow::on_actZoomOut_triggered()
{
    ui->chartView->chart()->zoom(0.8);
}

void MainWindow::on_actDraw_triggered()
{
    prepareData();
}

void MainWindow::on_actZoomReset_triggered()
{
    ui->chartView->chart()->zoomReset();
}

void MainWindow::on_btnLinePen_clicked()
{
    QPen pen = curSeries->pen();
    bool ok = false;
    pen = DialogPen::getPen(pen, ok);

    if(ok)
    {
        curSeries->setPen(pen);
    }
}

void MainWindow::on_btnSetTitle_clicked()
{
    QString strTitle =  ui->lineEditTitle->text();
    QChart *chart = ui->chartView->chart();
    chart->setTitle(strTitle);
}

void MainWindow::on_btnSetTitleFont_clicked()
{
    QFont font = ui->chartView->chart()->titleFont();
    bool ok;
    font = QFontDialog::getFont(&ok, font);

    if(ok)
    {
        ui->chartView->chart()->setTitleFont(font);
    }
}

void MainWindow::on_rbtnUp_clicked()
{
    ui->chartView->chart()->legend()->setAlignment(Qt::AlignTop);
}

void MainWindow::on_rbtnDown_clicked()
{
    ui->chartView->chart()->legend()->setAlignment(Qt::AlignBottom);
}

void MainWindow::on_rbtnLeft_clicked()
{
    ui->chartView->chart()->legend()->setAlignment(Qt::AlignLeft);
}

void MainWindow::on_rbtnRight_clicked()
{
    ui->chartView->chart()->legend()->setAlignment(Qt::AlignRight);
}

void MainWindow::on_checkBoxName_clicked(bool checked)
{
    ui->chartView->chart()->legend()->setVisible(checked);
}

void MainWindow::on_checkBoxBack_clicked(bool checked)
{
    ui->chartView->chart()->legend()->setBackgroundVisible(checked);
}

void MainWindow::on_btnNameFont_clicked()
{
    QFont font = ui->chartView->chart()->legend()->font();
    bool ok;
    font = QFontDialog::getFont(&ok, font);

    if(ok)
    {
        ui->chartView->chart()->legend()->setFont(font);
    }
}

void MainWindow::on_btnNameColor_clicked()
{
    QColor color = ui->chartView->chart()->legend()->labelColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        ui->chartView->chart()->legend()->setLabelColor(    color);
    }
}

void MainWindow::on_btnSetMargin_clicked()
{
    QMargins mg;
    mg.setTop(ui->spinBoxUp->value());
    mg.setBottom(ui->spinBoxDown->value());
    mg.setLeft(ui->spinBoxLeft->value());
    mg.setRight(ui->spinBoxRight->value());
    ui->chartView->chart()->setMargins(mg);
}

void MainWindow::on_comboBoxAction_currentIndexChanged(int index)
{
    ui->chartView->chart()->setAnimationOptions((QChart::AnimationOptions)index);
}

void MainWindow::on_comboBoxTheme_currentIndexChanged(int index)
{
    ui->chartView->chart()->setTheme((QChart::ChartTheme)index);
}

void MainWindow::on_rbtnSeriesSin_clicked()
{
    if( ui->rbtnSeriesSin->isChecked())
    {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(0);
    }
    else
    {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(1);
    }

    ui->lineEditLine->setText(curSeries->name());
    ui->checkBoxSeries->setChecked(curSeries->isVisible());
    ui->checkBoxDataPoint->setChecked(curSeries->pointsVisible());
    ui->horizontalSlider->setValue(curSeries->opacity() * 10); // 0-1 => 0-10
    ui->checkBoxPointTip->setChecked(curSeries->pointLabelsVisible());
}

void MainWindow::on_rbtnSeriesCos_clicked()
{
    if( ui->rbtnSeriesSin->isChecked())
    {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(0);
    }
    else
    {
        curSeries = (QLineSeries*)ui->chartView->chart()->series().at(1);
    }

    ui->lineEditLine->setText(curSeries->name());
    ui->checkBoxSeries->setChecked(curSeries->isVisible());
    ui->checkBoxDataPoint->setChecked(curSeries->pointsVisible());
    ui->horizontalSlider->setValue(curSeries->opacity() * 10); // 0-1 => 0-10
    ui->checkBoxPointTip->setChecked(curSeries->pointLabelsVisible());
}

void MainWindow::on_btnLineName_clicked()
{
    curSeries->setName(ui->lineEditLine->text());
}

void MainWindow::on_checkBoxSeries_clicked(bool checked)
{
    curSeries->setVisible(checked);
}

void MainWindow::on_checkBoxDataPoint_clicked(bool checked)
{
    curSeries->setPointLabelsVisible(checked);
}

void MainWindow::on_btnLineColor_clicked()
{
    QColor color = curSeries->color();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curSeries->setColor(color);
    }
}

void MainWindow::on_horizontalSlider_valueChanged(int value)
{
    curSeries->setOpacity(value / 10.0);
}

void MainWindow::on_checkBoxPointTip_clicked(bool checked)
{
    curSeries->setPointLabelsVisible(checked);
}

void MainWindow::on_btnPointTipColor_clicked()
{
    QColor color = curSeries->pointLabelsColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curSeries->setPointLabelsColor(color);
    }
}

void MainWindow::on_btnPointTipFont_clicked()
{
    QFont font = curSeries->pointLabelsFont();
    bool ok;
    font = QFontDialog::getFont(&ok, font);

    if(ok)
    {
        curSeries->setPointLabelsFont(font);
    }
}

void MainWindow::on_rbtnDisplayX_clicked()
{
    if(ui->rbtnDisplayX->isChecked())
    {
        curSeries->setPointLabelsFormat("@yPoint");
    }
    else
    {
        curSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    }
}

void MainWindow::on_rbtnDisplayXY_clicked()
{
    if(ui->rbtnDisplayX->isChecked())
    {
        curSeries->setPointLabelsFormat("@yPoint");
    }
    else
    {
        curSeries->setPointLabelsFormat("(@xPoint,@yPoint)");
    }
}

void MainWindow::on_rbtnSetX_clicked()
{
    QList<QAbstractAxis*> axes;

    if(ui->rbtnSetX->isChecked())
    {
        axes = ui->chartView->chart()->axes(Qt::Horizontal);
    }
    else
    {
        axes = ui->chartView->chart()->axes(Qt::Vertical);
    }

    curAxis = (QValueAxis*)axes[0];

    ui->doubleSpinBoxMin->setValue(curAxis->min());
    ui->doubleSpinBoxMax->setValue(curAxis->max());

    ui->lineEditAxisTitle->setText(curAxis->titleText());
    ui->checkBoxAxisTitleIsVisibe->setChecked(curAxis->isTitleVisible());

    ui->lineEditFormat->setText(curAxis->labelFormat());
    ui->checkBoxAxisTitleIsVisibe->setChecked(curAxis->labelsVisible());

    ui->checkBoxIsGridLineVisible->setChecked(curAxis->isGridLineVisible());
    ui->checkBoxisLineVisible->setChecked(curAxis->isLineVisible());

    ui->spinBoxTick->setValue(curAxis->tickCount());
    ui->checkBoxisLineVisible->setChecked(curAxis->isLineVisible());

    ui->spinBoxMinorTick->setValue(curAxis->minorTickCount());
    ui->checkBoxIsMinorGirdLineVisible->setChecked(curAxis->isMinorGridLineVisible());
}

void MainWindow::on_rbtnSetY_clicked()
{
    QList<QAbstractAxis*> axes;

    if(ui->rbtnSetX->isChecked())
    {
        axes = ui->chartView->chart()->axes(Qt::Horizontal);
    }
    else
    {
        axes = ui->chartView->chart()->axes(Qt::Vertical);
    }

    curAxis = (QValueAxis*)axes[0];

    ui->doubleSpinBoxMin->setValue(curAxis->min());
    ui->doubleSpinBoxMax->setValue(curAxis->max());

    ui->lineEditAxisTitle->setText(curAxis->titleText());
    ui->checkBoxAxisTitleIsVisibe->setChecked(curAxis->isTitleVisible());

    ui->lineEditFormat->setText(curAxis->labelFormat());
    ui->checkBoxAxisTitleIsVisibe->setChecked(curAxis->labelsVisible());

    ui->checkBoxIsGridLineVisible->setChecked(curAxis->isGridLineVisible());
    ui->checkBoxisLineVisible->setChecked(curAxis->isLineVisible());

    ui->spinBoxTick->setValue(curAxis->tickCount());
    ui->checkBoxisLineVisible->setChecked(curAxis->isLineVisible());

    ui->spinBoxMinorTick->setValue(curAxis->minorTickCount());
    ui->checkBoxIsMinorGirdLineVisible->setChecked(curAxis->isMinorGridLineVisible());
}

void MainWindow::on_checkBoxIsVisible_clicked(bool checked)
{
    curAxis->setVisible(checked);
}

void MainWindow::on_btnSetAxisRange_clicked()
{
    curAxis->setRange(ui->doubleSpinBoxMin->value(), ui->doubleSpinBoxMax->value());
}

void MainWindow::on_btnSetAxisTitle_clicked()
{
    curAxis->setTitleText(ui->lineEditAxisTitle->text());
}

void MainWindow::on_checkBoxAxisTitleIsVisibe_clicked(bool checked)
{
    curAxis->setTitleVisible(checked);
}

void MainWindow::on_btnAxisTitleFont_clicked()
{
    QFont font = curAxis->titleFont();
    bool ok;
    font = QFontDialog::getFont(&ok, font);

    if(ok)
    {
        curAxis->setTitleFont(font);
    }
}

void MainWindow::on_btnSetFormat_clicked()
{
    curAxis->setLabelFormat(ui->lineEditFormat->text());
}

void MainWindow::on_btnSetColor_clicked()
{
    QColor color = curAxis->labelsColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curAxis->setLabelsColor(color);
    }
}

void MainWindow::on_btnSetFont_clicked()
{
    QFont font = curAxis->labelsFont();
    bool ok;
    font = QFontDialog::getFont(&ok, font);

    if(ok)
    {
        curAxis->setLabelsFont(font);
    }
}

void MainWindow::on_checkBoxlabelVisible_clicked(bool checked)
{
    curAxis->setLabelsVisible(checked);
}

void MainWindow::on_checkBoxIsGridLineVisible_clicked(bool checked)
{
    curAxis->setLineVisible(checked);
}

void MainWindow::on_btnGridLineColor_clicked()
{
    QColor color = curAxis->gridLineColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curAxis->setGridLineColor(color);
    }
}

void MainWindow::on_btnGridLinePen_clicked()
{
    QPen pen = curAxis->gridLinePen();
    bool ok = false;
    pen = DialogPen::getPen(pen, ok);

    if(ok)
    {
        curAxis->setGridLinePen(pen);
    }
}

void MainWindow::on_checkBoxIsMinorGirdLineVisible_clicked(bool checked)
{
    curAxis->setMinorGridLineVisible(checked);
}

void MainWindow::on_btnMinorGridLineColor_clicked()
{
    QColor color = curAxis->minorGridLineColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curAxis->setMinorGridLineColor(color);
    }
}

void MainWindow::on_btnMinorGirdLinePen_clicked()
{
    QPen pen = curAxis->minorGridLinePen();
    bool ok = false;
    pen = DialogPen::getPen(pen, ok);

    if(ok)
    {
        curAxis->setMinorGridLinePen(pen);
    }
}

void MainWindow::on_spinBoxMinorTick_valueChanged(int arg1)
{
    curAxis->setMinorTickCount(arg1);
}

void MainWindow::on_btnLinePen_2_clicked()
{
    QPen pen = curAxis->linePen();
    bool ok = false;
    pen = DialogPen::getPen(pen, ok);

    if(ok)
    {
        curAxis->setLinePen(pen);
    }
}

void MainWindow::on_spinBoxTick_valueChanged(int arg1)
{
    curAxis->setTickCount(arg1);
}

void MainWindow::on_btnLinePenColor_clicked()
{
    QColor color = curAxis->linePenColor();
    color = QColorDialog::getColor(color);

    if(color.isValid())
    {
        curAxis->setLinePenColor(color);
    }
}

三、QChart常见图表绘制

1、图表与类

(1)柱状图

  • QBarSet:数据集
  • QBarSeries:一个序列可以包含多个QBarSet
  • QBarCategoryAxis:横坐标轴
  • QValueAxis:纵坐标轴

(2)饼状图

  • QPieSeries:数据序列
  • QPieSlice:饼图扇区

(3)堆叠柱状图

  • QBarSet:数据集
  • QStackedBarSeries:一个序列可以有多个QBarSet
  • QBarCategoryAxis:横坐标
  • QValueAxis:纵坐标轴

(4)百分比柱状图

  • QBarSet:数据集
  • QPercentageBarSeries:一个序列可以有多个QBarSet
  • QBarCategoryAxis:横坐标
  • QValueAxis:纵坐标轴

(5)散点图和光滑曲线

  • QSplineSeries、QLineSeries:散点和平滑线
  • QValueAxis:坐标轴。

2、实现程序

在这里插入图片描述

(1)创建项目,基于QMainWindows

(2)添加图表资源文件,添加工具栏

(3)添加组件

在这里插入图片描述

(4)柱状图

在这里插入图片描述

void MainWindow::initBarChart()
{
    QChart *chart = new QChart;
    chart->setTitle("BarChart演示");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    ui->cvChartBar->setChart(chart);
    ui->cvChartBar->setRenderHint(QPainter::Antialiasing);
}

void MainWindow::buildBarChart()
{
    QChart *chart = ui->cvChartBar->chart();
    chart->removeAllSeries();

    if(chart->axisX() != nullptr)
    {
        chart->removeAxis(chart->axisX());
    }

    if(chart->axisY() != nullptr)
    {
        chart->removeAxis(chart->axisY());
    }

    // 数据集
    QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(colNoMath)->text());
    QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(colNoChinese)->text());
    QBarSet *setEnglish = new QBarSet(theModel->horizontalHeaderItem(colNoEnglish)->text());
    QLineSeries *lineAverage = new QLineSeries;
    lineAverage->setName(theModel->horizontalHeaderItem(colNoAverage)->text());
    QPen pen;
    pen.setColor(Qt::red);
    pen.setWidth(2);
    lineAverage->setPen(pen);


    for (int i = 0; i < theModel->rowCount(); ++i)
    {
        setMath->append(theModel->item(i, colNoMath)->text().toInt());
        setChinese->append(theModel->item(i, colNoChinese)->text().toInt());
        setEnglish->append(theModel->item(i, colNoEnglish)->text().toInt());
        lineAverage->append(QPointF(i, theModel->item(i, colNoAverage)->text().toFloat()));
    }

    // 序列
    QBarSeries *series = new QBarSeries;
    series->append(setMath);
    series->append(setChinese);
    series->append(setEnglish);

    chart->addSeries(series);
    chart->addSeries(lineAverage);
    chart->legend()->setAlignment(Qt::AlignBottom);

    QStringList category;

    for (int i = 0; i < theModel->rowCount(); ++i)
    {
        category << theModel->item(i, colNoName)->text();
    }

    QBarCategoryAxis *axisX = new QBarCategoryAxis;
    axisX->setCategories(category);
    chart->setAxisX(axisX, series);
    chart->setAxisX(axisX, lineAverage);

    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(0, 100);
    axisY->setTitleText("分数");
    chart->setAxisY(axisY, series);
    chart->setAxisY(axisY, lineAverage);
}

(5)饼状图

在这里插入图片描述

void MainWindow::initPieChart()
{
    QChart *chart = new QChart;
    chart->setTitle("PieChart演示");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    ui->cvPieChart->setChart(chart);
    ui->cvPieChart->setRenderHint(QPainter::Antialiasing);
}

void MainWindow::buildPieChart()
{
    QChart *chart = ui->cvPieChart->chart();
    chart->removeAllSeries();

    if(chart->axisX() != nullptr)
    {
        chart->removeAxis(chart->axisX());
    }

    if(chart->axisY() != nullptr)
    {
        chart->removeAxis(chart->axisY());
    }

    QPieSeries *series = new QPieSeries;
    series->setHoleSize(ui->dSpinBoxHoleSize->value());
    series->setPieSize(ui->dSpinBoxPieSize->value());

    int colNo = ui->comboBoxScore->currentIndex() + colNoMath;

    for (int i = 0; i < 5; ++i)
    {
        QTreeWidgetItem *item = ui->treeWidget->topLevelItem(i);
        series->append(item->text(0), item->text(colNo).toFloat());
    }

    QPieSlice *slice;

    for (int i = 0; i < 5; ++i)
    {
        slice = series->slices().at(i);
        slice->setLabel(slice->label() + QString::asprintf("%.0f人, %.2f%%",
                        slice->value(), slice->percentage()));
        connect(slice, SIGNAL(hovered(bool)),
                this, SLOT(on_SliceHigtLight(bool)));
    }

    series->setLabelsVisible(true);
    chart->setTitle("PieChart --" + ui->comboBoxScore->currentText());
    chart->addSeries(series);
    chart->legend()->setAlignment(Qt::AlignRight);
}

void MainWindow::on_SliceHigtLight(bool show)
{
    // 鼠标到饼图扇区,弹出动画
    QPieSlice *slice = (QPieSlice*)sender();
    slice->setExploded(show);
}

void MainWindow::on_dSpinBoxHoleSize_valueChanged(double arg1)
{
    QPieSeries* series = (QPieSeries*) ui->cvPieChart->chart()->series().at(0);
    series->setHoleSize(arg1);
}

void MainWindow::on_dSpinBoxPieSize_valueChanged(double arg1)
{
    QPieSeries* series = (QPieSeries*) ui->cvPieChart->chart()->series().at(0);
    series->setPieSize(arg1);
}

void MainWindow::on_comboBoxTheme_currentIndexChanged(int index)
{
    ui->cvPieChart->chart()->setTheme(QChart::ChartTheme(index));
}

(6)堆叠柱状图

在这里插入图片描述

void MainWindow::initStackedBar()
{
    QChart *chart = new QChart;
    chart->setTitle("StackedBar演示");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    ui->cvStackedBar->setChart(chart);
    ui->cvStackedBar->setRenderHint(QPainter::Antialiasing);
}

void MainWindow::buildStackedBar()
{
    QChart *chart = ui->cvStackedBar->chart();
    chart->removeAllSeries();

    if(chart->axisX() != nullptr)
    {
        chart->removeAxis(chart->axisX());
    }

    if(chart->axisY() != nullptr)
    {
        chart->removeAxis(chart->axisY());
    }

    // 数据集
    QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(colNoMath)->text());
    QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(colNoChinese)->text());
    QBarSet *setEnglish = new QBarSet(theModel->horizontalHeaderItem(colNoEnglish)->text());

    QStringList categories;

    for (int i = 0; i < theModel->rowCount(); ++i)
    {
        categories << theModel->item(i, colNoName)->text();

        setMath->append(theModel->item(i, colNoMath)->text().toFloat());
        setChinese->append(theModel->item(i, colNoChinese)->text().toFloat());
        setEnglish->append(theModel->item(i, colNoEnglish)->text().toFloat());
    }

    QStackedBarSeries *series = new QStackedBarSeries;
    series->append(setMath);
    series->append(setChinese);
    series->append(setEnglish);

    chart->addSeries(series);

    QBarCategoryAxis *axisX = new QBarCategoryAxis;
    axisX->append(categories);
    chart->setAxisX(axisX, series);

    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(0, 300);
    axisY->setTitleText("总分");
    chart->setAxisY(axisY, series);
}

(7)百分比柱状图

在这里插入图片描述

void MainWindow::initPercentBar()
{
    QChart *chart = new QChart;
    chart->setTitle("PercentBar演示");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    ui->cvPercentBar->setChart(chart);
    ui->cvPercentBar->setRenderHint(QPainter::Antialiasing);
}

void MainWindow::buildPercentBar()
{
    QChart *chart = ui->cvPercentBar->chart();
    chart->removeAllSeries();

    if(chart->axisX() != nullptr)
    {
        chart->removeAxis(chart->axisX());
    }

    if(chart->axisY() != nullptr)
    {
        chart->removeAxis(chart->axisY());
    }

    // 数据集
    QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(colNoMath)->text());
    QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(colNoChinese)->text());
    QBarSet *setEnglish = new QBarSet(theModel->horizontalHeaderItem(colNoEnglish)->text());

    QStringList categories;

    for (int i = 0; i < 5; ++i)
    {
        categories << ui->treeWidget->topLevelItem(i)->text(colNoName);

        setMath->append(ui->treeWidget->topLevelItem(i)->text(colNoMath).toFloat());
        setChinese->append(ui->treeWidget->topLevelItem(i)->text(colNoChinese).toFloat());
        setEnglish->append(ui->treeWidget->topLevelItem(i)->text(colNoEnglish).toFloat());
    }

    QPercentBarSeries *series = new QPercentBarSeries;
    series->append(setMath);
    series->append(setChinese);
    series->append(setEnglish);

    chart->addSeries(series);

    QBarCategoryAxis *axisX = new QBarCategoryAxis;
    axisX->append(categories);
    chart->setAxisX(axisX, series);

    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(0, 100);
    axisY->setTitleText("分数百分比");
    chart->setAxisY(axisY, series);
}

(8)散点曲线图

在这里插入图片描述

void MainWindow::initScatterChart()
{
    QChart *chart = new QChart;
    chart->setTitle("ScatterChart演示");
    chart->setAnimationOptions(QChart::SeriesAnimations);
    ui->cvScatterChart->setChart(chart);
    ui->cvScatterChart->setRenderHint(QPainter::Antialiasing);
}

void MainWindow::buildScatterChart()
{
    QChart *chart = ui->cvScatterChart->chart();
    chart->removeAllSeries();

    if(chart->axisX() != nullptr)
    {
        chart->removeAxis(chart->axisX());
    }

    if(chart->axisY() != nullptr)
    {
        chart->removeAxis(chart->axisY());
    }

    QSplineSeries *seriesLine = new QSplineSeries;
    seriesLine->setName("spline");

    QPen pen;
    pen.setWidth(2);
    pen.setColor(Qt::red);
    seriesLine->setPen(pen);

    QScatterSeries *series0 = new QScatterSeries;
    series0->setName("散点");
    series0->setMarkerShape(QScatterSeries::MarkerShapeCircle); // 圆形
    series0->setBorderColor(Qt::black);
    series0->setBrush(QBrush(Qt::blue));
    series0->setMarkerSize(12);

    for (int i = 0; i < 10; ++i)
    {
        int x = qrand() % 20;
        int y = qrand() % 20;
        series0->append(x, y);
        seriesLine->append(x, y);
    }

    chart->addSeries(seriesLine);
    chart->addSeries(series0);

    chart->createDefaultAxes();
    chart->axisX()->setTitleText("X轴");
    chart->axisX()->setRange(-5, 25);
    chart->axisY()->setTitleText("Y轴");
    chart->axisY()->setRange(-5, 25);
}

四、图表其他操作

图表特定鼠标事件操作需要使用继承类实现事件的处理

1、实现程序

在这里插入图片描述

(1)创建项目,基于QMainWindow

(2)添加资源文件与图标

(3)添加QChartView派生类

#include "axbchartview.h"

AXBChartView::AXBChartView(QWidget *parent) : QChartView(parent)
{
    setMouseTracking(true); //
    setDragMode(QGraphicsView::RubberBandDrag); // 框选区域
}

void AXBChartView::keyPressEvent(QKeyEvent *event)
{
    switch (event->key())
    {
    case Qt::Key_Plus:
    {
        chart()->zoom(1.2);
    }
    break;

    case Qt::Key_Minus:
    {
        chart()->zoom(0.8);
    }
    break;

    case Qt::Key_Left:
    {
        chart()->scroll(10, 0);
    }
    break;

    case Qt::Key_Right:
    {
        chart()->scroll(-10, 0);
    }
    break;

    case Qt::Key_Up:
    {
        chart()->scroll(0, -10);
    }
    break;

    case Qt::Key_Down:
    {
        chart()->scroll(0, 10);
    }
    break;

    case Qt::Key_PageUp:
    {
        chart()->scroll(0, -50);
    }
    break;

    case Qt::Key_PageDown:
    {
        chart()->scroll(0, 50);
    }
    break;

    case Qt::Key_Home:
    {
        chart()->zoomReset();
    }
    break;

    default:
        QGraphicsView::keyPressEvent(event);
        break;
    }
}

void AXBChartView::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        beginPoint = event->pos();
    }

    QChartView::mousePressEvent(event);
}

void AXBChartView::mouseMoveEvent(QMouseEvent *event)
{
    QPoint point = event->pos();
    emit mouseMovePoint(point);
    QChartView::mouseMoveEvent(event);
}

void AXBChartView::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        endPoint = event->pos();
        QRectF rectF;
        rectF.setTopLeft(beginPoint);
        rectF.setBottomRight(endPoint);
        if(rectF.width() > 10 || rectF.height() > 10)
        {
            chart()->zoomIn(rectF);
        }
    }
    else if(event->button() == Qt::RightButton)
    {
        chart()->zoomReset();
    }

    QChartView::mouseReleaseEvent(event);
}

(4)实现功能

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "axbchartview.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    setCentralWidget(ui->chartView);

    labXYValue = new QLabel("坐标X: Y: ");
    labXYValue->setMinimumWidth(200);
    ui->statusBar->addWidget(labXYValue);

    createChart();
    prepareData();

    connect(ui->chartView, SIGNAL(mouseMovePoint(QPoint)),
            this, SLOT(on_mouseMovePoint(QPoint)));
}

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

void MainWindow::createChart()
{
    QChart *chart = new QChart;
    chart->setTitle("曲线");
    ui->chartView->setChart(chart);
    ui->chartView->setRenderHint(QPainter::Antialiasing);

    QLineSeries *series0 = new QLineSeries;
    QLineSeries *series1 = new QLineSeries;
    series0->setName("Sin曲线");
    series1->setName("Cos曲线");

    QPen pen;
    pen.setStyle(Qt::DotLine);
    pen.setColor(Qt::green);
    pen.setWidth(2);
    series0->setPen(pen);
    pen.setColor(Qt::red);
    series1->setPen(pen);

    chart->addSeries(series0);
    chart->addSeries(series1);
    chart->createDefaultAxes();
    chart->axisX()->setRange(0, 10);
    chart->axisY()->setRange(-1.5, 1.5);

    foreach (auto marker, ui->chartView->chart()->legend()->markers())
    {
        connect(marker, SIGNAL(clicked()),
                this, SLOT(on_legendMarkerClicked()));
    }
}

void MainWindow::prepareData()
{
    // 准备数据
    QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at(0);
    QLineSeries *series1 = (QLineSeries *)ui->chartView->chart()->series().at(1);

    qsrand(QTime::currentTime().second());

    for (int i = 0; i < 100; ++i)
    {
        qreal dValue;
        dValue = qSin(i * 0.1) + (qrand() % 10 - 5) / 10.0;
        series0->append(i * 0.1, dValue);
        dValue = qCos(i * 0.1) + (qrand() % 10 - 5) / 10.0;
        series1->append(i * 0.1, dValue);
    }
}

void MainWindow::on_mouseMovePoint(QPoint point)
{
    QPointF pt = ui->chartView->chart()->mapToValue(point);
    labXYValue->setText(QString::asprintf("坐标X: %.2f Y: %.2f",
                                          pt.x(), pt.y()));
}

void MainWindow::on_legendMarkerClicked()
{
    QLegendMarker *marker = (QLegendMarker*)sender();
    marker->series()->setVisible(!marker->series()->isVisible());
    marker->setVisible(true);
    int alpha = 255;

    if(!marker->series()->isVisible())
    {
        alpha = 120;
    }

    QBrush brush = marker->labelBrush();
    QColor color = brush.color();
    color.setAlpha(alpha);
    brush.setColor(color);
    marker->setLabelBrush(brush);
}

void MainWindow::on_actZoomIn_triggered()
{
    ui->chartView->chart()->zoom(1.2);
}

void MainWindow::on_actZoomOut_triggered()
{
    ui->chartView->chart()->zoom(0.8);
}

void MainWindow::on_actZoomReset_triggered()
{
    ui->chartView->chart()->zoomReset();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1427229.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何用gpt快速做好数据分析?

由于技术限制&#xff0c;目前InfinitePaper AI仅支持上传1份文件&#xff0c;且大小不超过10M。但是&#xff0c;在强大的代码解释器面前&#xff0c;这都是小问题。我们只需要将可能用到的文件打包成压缩文件上传即可&#xff0c;之后要求GPT直接解压就能正常完成后续需求。 …

Vue学习之使用HBuilderX创建并使用vue3.0项目

Vue学习之使用HBuilderX创建并使用vue3.0项目 下文将简述如何使用HBuilderX创建并使用vue3.0项目&#xff0c;包含项目创建、目录介绍、如何引用组件、首页自定义设置。 1、创建vue3.0项目 具体操作之前章节已经阐述过不在冗余介绍&#xff0c;创建时选择vue3项目即可。vue2…

2023年03月CCF-GESP编程能力等级认证Python编程二级真题解析

Python等级认证GESP(1~6级)全部真题・点这里 一、单选题(共15题,共30分) 第1题 以下存储器中的数据不会受到附近强磁场干扰的是( )。 A:硬盘 B:U 盘 C:内存 D:光盘 答案:D 第2题 下列流程图,属于计算机的哪种程序结构?( ) A:顺序结构 B:循环结构 C:…

《Lua程序设计》-- 学习10

环境&#xff08;Environment&#xff09; 具有动态名称的全局变量 全局变量的声明 由于Lua语言将全局变量存放在一个普通的表中&#xff0c;所以可以通过元表来发现访问不存在全局变量的情况。 正如前面所提到的&#xff0c;我们不允许值为nil的全局变量&#xff0c;因为值为…

C语言·贪吃蛇游戏(上)

1. 游戏任务 使用C语言在Windows环境的控制台中模拟实现小游戏贪吃蛇 游戏中要包含以下功能&#xff1a; 1. 贪吃蛇地图绘制 2. 贪吃蛇上下左右移动和吃食物 3. 蛇撞墙&#xff0c;或撞到自身死亡 4. 计算得分 5. 蛇身加速、减速 6. 暂停游戏 2. Win32 API 介绍 Windows是一种多…

【MATLAB源码-第131期】基于matlab的淘金优化算法(GRO)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 淘金优化算法&#xff08;GoldRush Optimizer&#xff0c;简称GRO&#xff09;是一种启发式优化算法&#xff0c;它受到淘金过程的启发。在淘金过程中&#xff0c;淘金者在河流或矿区中寻找金矿&#xff0c;通过筛选沙砾来寻…

病历管理系统

技术架构&#xff1a; StrutsSpringHibernate 有需要该项目的小伙伴可以私信我你的Q。 功能描述&#xff1a; 企业财务管理系统主要用于电子病历来提高医院各项工作的效率和质量&#xff0c;促进医学科研、教学&#xff1b;减轻各类事务性工作的劳动强度&#xff0c;使他们…

2024美赛选题建议+ABCDEF思路分享

选题建议 A题 题目见&#xff1a; https://zxljhy.blog.csdn.net/article/details/135985116https://zxljhy.blog.csdn.net/article/details/135985116建议&#xff1a; A题是机理分析&#xff0c;需要去找到合适的数据对物种发展规律进行研究&#xff0c;结合生态学原理和动…

Windows SDK(三)GDI图形绘制基础

GDI介绍 GDI:图形设备接口&#xff1a;Windows的子系统&#xff0c;负责在视讯显示器和打印机上显示图形。 GDI常见名词解释&#xff1a; 直线 曲线 填入区域&#xff1a;直线或曲线构成的封闭区域&#xff0c;可以用画刷进行填充 位图&#xff1a;点阵图像 文字 映…

DEV-C++ ege.h库 绘图教程合集

一、目录 DEV-C ege.h库 绘图教程&#xff08;一&#xff09;——基本绘图函数 DEV-C ege.h库 绘图教程&#xff08;二&#xff09;——高级绘图函数&#xff08;上&#xff09; DEV-C ege.h库 绘图教程&#xff08;三&#xff09;——高级绘图函数&#xff08;下&#xff09;时…

探索自然语言处理在改善搜索引擎、语音助手和机器翻译中的应用

文章目录 每日一句正能量前言文本分析语音识别机器翻译语义分析自然语言生成情感分析后记 每日一句正能量 努力学习&#xff0c;勤奋工作&#xff0c;让青春更加光彩。 前言 自然语言处理&#xff08;NLP&#xff09;是人工智能领域中与人类语言相关的重要研究方向&#xff0c…

day07-CSS高级

01-定位 作用&#xff1a;灵活的改变盒子在网页中的位置 实现&#xff1a; 1.定位模式&#xff1a;position 2.边偏移&#xff1a;设置盒子的位置 left right top bottom 相对定位 position: relative 特点&#xff1a; 不脱标&#xff0c;占用自己原来位置 显示模…

最长的指定瑕疵度的元音子串 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 开头和结尾都是元音字母&#xff08;aeiouAEIOU&#xff09;的字符串为元音字符串&#xff0c;其中混杂的非元音字母数量为其瑕疵度。比如: “a” 、 “aa” 是元…

视频怎么加水印?分享两个简单的加水印的方法

在数字媒体时代&#xff0c;视频已经成为信息传播的重要方式。许多人在创作视频是会加上自己独特的水印&#xff0c;防止视频被盗用。水印作为数字版权保护技术的一种&#xff0c;可以有效地防止视频被非法复制、传播或篡改&#xff0c;从而保护创作者的权益和利益。下面我分享…

小程序中picker多列选择器

需求&#xff1a;实现类似省市联动的效果&#xff0c;选择第一列后&#xff0c;第二列数据变化 html部分: <view class"section"><view>多列选择器</view><picker mode"multiSelector" bindchange"bindMultiPickerChange"…

动环系统断电告警的防误报

机房一般接入的市电为三相380伏特&#xff0c;也有用单向220伏特的。UPS本身提供断电告警的功能&#xff0c;这个告警在各种种类的UPS中都是提供的&#xff0c;不同电压的市电输入都支持&#xff1b;三相电另外有缺相告警事件。但这些告警事件存在抖动或者误判。 瞬间的低压或…

C语言标准库所有字符串操作库函数汇总

以下是C语言标准库中字符串操作相关的API列表&#xff0c;这些函数通常在 <string.h> 头文件中定义&#xff1a; 1. strlen - 计算字符串长度&#xff0c;不包括结尾的空字符\0&#xff1a; size_t strlen(const char *str); 2. strcpy - 复制字符串&#xff1a; c…

网络编程套接字(3)

网络编程套接字 简单的TCP英译汉服务器地址转换函数字符串IP转整数IP整数IP转字符串IP关于inet_ntoa函数并发场景下的inet_ntoa函数绑定失败问题TCP协议通讯流程数据传输的过程数据交互四次挥手的过程端口连接 简单的TCP英译汉服务器 之前我们是以回调的方式处理任务的&#x…

再谈启动一个Activity大致时序图

太多了&#xff0c;笔者不想写&#xff0c; 读者可通过PlantUML插件查看如下PUML文件生成的时序图。 补充说明下&#xff0c;Android31版本。 startuml https://plantuml.com/sequence-diagram skinparam dpi 800 scale 15000 width scale 5000 heightautonumber Launcher La…

AJAX-入门

定义 概念&#xff1a;AJAX是浏览器与服务器进行数据通信的技术 使用 1.先使用axios库&#xff0c;与服务器进行数据通信 1&#xff09;基于XMLHttpRequest封装、代码简单、月下载量在14亿次 2&#xff09;Vue、React项目中都会用到axios 2.再学习XMLHttpRequest对象的使用…