找回密码
 立即注册
Qt开源社区 门户 查看内容

Qt官方示例-图表主题

2019-10-27 11:54| 发布者: admin| 查看: 699| 评论: 0

摘要: 示例可以设置图表的系统内置主题。0x00 主题样式预览Light主题Blue Cerulean主题Dark主题Brow Sand主题Blue NCS主题High ontrast主题Blue Icy主题Qt主题0x01 创建图表  以面积图为例。需要创建QChart类作为面积图 ...

示例可以设置图表的系统内置主题。



0x00 主题样式预览

  • Light主题



  • Blue Cerulean主题




  • Dark主题




  • Brow Sand主题




  • Blue NCS主题




  • High ontrast主题




  • Blue Icy主题




  • Qt主题



0x01 创建图表


  以面积图为例。

  • 需要创建QChart类作为面积图图表容器。
QChart *chart =newQChart();
chart->setTitle("Area chart");

  • 创建QLineSeriesQAreaSeries实例装载数据。
for(inti(0); i < m_dataTable.count(); i++){
QLineSeries *upperSeries =newQLineSeries(chart);
for(intj(0); j < m_dataTable[i].count(); j++){
Data data = m_dataTable[i].at(j);
if(lowerSeries){
const QVector<QPointF>& points = lowerSeries->pointsVector();
upperSeries->append(QPointF(j, points[i].y()+ data.first.y()));
}else{
upperSeries->append(QPointF(j, data.first.y()));
}
}
QAreaSeries *area =newQAreaSeries(upperSeries, lowerSeries);
area->setName(name + QString::number(nameIndex));
nameIndex++;
chart->addSeries(area);
lowerSeries = upperSeries;
}

  • 设置默认坐标轴和坐标轴范围。
chart->createDefaultAxes();
chart->axes(Qt::Horizontal).first()->setRange(0, m_valueCount -1);
chart->axes(Qt::Vertical).first()->setRange(0, m_valueMax);

  • 设置坐标轴的标签格式。
QValueAxis *axisY = qobject_cast<QValueAxis*>(chart->axes(Qt::Vertical).first());
Q_ASSERT(axisY);
axisY->setLabelFormat("%.1f ");

0x02 设置主题


  用户可以可以选择系统中的内置主题。然后将此主题应用于布局中的所有图表。

  • 配置组合框中的内置主题。
// add items to theme combobox
m_ui->themeComboBox->addItem("Light", QChart::ChartThemeLight);
m_ui->themeComboBox->addItem("Blue Cerulean", QChart::ChartThemeBlueCerulean);
m_ui->themeComboBox->addItem("Dark", QChart::ChartThemeDark);
m_ui->themeComboBox->addItem("Brown Sand", QChart::ChartThemeBrownSand);
m_ui->themeComboBox->addItem("Blue NCS", QChart::ChartThemeBlueNcs);
m_ui->themeComboBox->addItem("High Contrast", QChart::ChartThemeHighContrast);
m_ui->themeComboBox->addItem("Blue Icy", QChart::ChartThemeBlueIcy);
m_ui->themeComboBox->addItem("Qt", QChart::ChartThemeQt);

  • 设置组合框中的内置主题样式。
QChart::ChartTheme theme =static_cast<QChart::ChartTheme>(
m_ui->themeComboBox->itemData(m_ui->themeComboBox->currentIndex()).toInt());
//![6]
constauto charts = m_charts;
if(!m_charts.isEmpty()&& m_charts.at(0)->chart()->theme()!= theme){
for(QChartView *chartView : charts){
//![7]
chartView->chart()->setTheme(theme);

0x03 设置图表动画


  可以设置每个图表上动画类型。




  • 组合框动画类型:

  1. 没有动画;

  2. 网格轴动画;

  3. 系列动画;

  4. 或者两者都有。
m_ui->animatedComboBox->addItem("No Animations", QChart::NoAnimation);
m_ui->animatedComboBox->addItem("GridAxis Animations", QChart::GridAxisAnimations);
m_ui->animatedComboBox->addItem("Series Animations", QChart::SeriesAnimations);
m_ui->animatedComboBox->addItem("All Animations", QChart::AllAnimations);

  • 遍历设置全部图表动画。
QChart::AnimationOptions options(
m_ui->animatedComboBox->itemData(m_ui->animatedComboBox->currentIndex()).toInt());
if(!m_charts.isEmpty()&& m_charts.at(0)->chart()->animationOptions()!= options){
for(QChartView *chartView : charts)
chartView->chart()->setAnimationOptions(options);
}

0x04 设置图表额外信息


  显示图表的额外信息在不同侧面。



  • 可以设置不同侧面显示图表信息。
m_ui->legendComboBox->addItem("No Legend ",0);
m_ui->legendComboBox->addItem("Legend Top", Qt::AlignTop);
m_ui->legendComboBox->addItem("Legend Bottom", Qt::AlignBottom);
m_ui->legendComboBox->addItem("Legend Left", Qt::AlignLeft);
m_ui->legendComboBox->addItem("Legend Right", Qt::AlignRight);

  • 遍历设置全部图表的侧面显示。
Qt::Alignment alignment(
m_ui->legendComboBox->itemData(m_ui->legendComboBox->currentIndex()).toInt());

if(!alignment){
for(QChartView *chartView : charts)
chartView->chart()->legend()->hide();
}else{
for(QChartView *chartView : charts){
chartView->chart()->legend()->setAlignment(alignment);
chartView->chart()->legend()->show();
}
}

0x05 图表抗锯齿


  抗锯齿开启后会对性能造成影像但会改善显示效果。
bool checked = m_ui->antialiasCheckBox->isChecked();
for(QChartView *chart : charts)
chart->setRenderHint(QPainter::Antialiasing, checked);

0x06 关于更多


  • 在QtCreator软件可以找到:



  • 或在以下Qt安装目录找到
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\charts\chartthemes

  • 相关链接
https://doc.qt.io/qt-5/qtcharts-chartthemes-example.html

  • Qt君公众号回复『Qt示例』获取更多内容。

----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:Qt君,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了