2020-2-2
之前的几个教程画的都是曲线图,今天我们来画柱状图,如下是最终效果图



文件目录树如下所示
.
|
|---main.cpp
|---barchart.cpp
|---barchart.h
我们先看barchart.h。
#ifndef _BAR_CHART_H_
#include <qwt_plot.h>
class QwtPlotMultiBarChart;
//类的前置声明
class BarChart: public QwtPlot
{
    Q_OBJECT
public:
    BarChart( QWidget * = NULL );
public Q_SLOTS:
    void setMode( int );
    void setOrientation( int );
    void exportChart();
private:
    void populate();
    QwtPlotMultiBarChart *d_barChartItem;
    //关于QwtPlotMultiBarChart,官方文档解释如下所示:QwtPlotMultiBarChart显示一系列包含一组值的样本。
    //好像不太好理解,我们可以暂时认为它是一个二维数组
};
#endif
BarChart继承自QwtPlot,有三个槽函数,一个私有方法,一个类型为QwtPlotMultiBarChart的私有d_barChartItem成员,下面我们逐个观察它的成员函数。
构造函数BarChart实现
BarChart::BarChart( QWidget *parent ) : QwtPlot( parent )
{
    setAutoFillBackground( true );
    //设置背景自动填充
    setPalette( Qt::white );
    //设置调色板
    canvas()->setPalette( QColor( "LemonChiffon" ) );
    //为画布设置调色板
    setTitle( "Bar Chart" );
    //设置画板标题
    setAxisTitle( QwtPlot::yLeft, "Whatever" );
    //设置左y轴标题
    setAxisTitle( QwtPlot::xBottom, "Whatever" );
    //设置底x轴标题
    d_barChartItem = new QwtPlotMultiBarChart( "Bar Chart " );
    //新建一个QwtPlotMultiBarChart,用来存储柱状图数据
    d_barChartItem->setLayoutPolicy( QwtPlotMultiBarChart::AutoAdjustSamples );
    //设置柱状图布局策略
    d_barChartItem->setSpacing( 20 );
    //设置空格
    d_barChartItem->setMargin( 3 );
    //设置边缘留白
    d_barChartItem->attach( this );
    //将柱状图数据添加到画板上
    insertLegend( new QwtLegend() );
    //插入图例
    populate();
    //产生数据
    setOrientation( 0 );
    //设置起点
    setAutoReplot( true );
    //设置自动刷新
}
populate实现
void BarChart::populate()
{
    static const char *colors[] = { "DarkOrchid", "SteelBlue", "Gold" };
    //三条柱状图颜色
    const int numSamples = 5;
    const int numBars = sizeof( colors ) / sizeof( colors[0] );
    QList<QwtText> titles;
    for ( int i = 0; i < numBars; i++ )
    {
        QString title("Bar %1");
        titles += title.arg( i );
    }
    d_barChartItem->setBarTitles( titles );
    d_barChartItem->setLegendIconSize( QSize( 10, 14 ) );
    for ( int i = 0; i < numBars; i++ )
    {
        QwtColumnSymbol *symbol = new QwtColumnSymbol( QwtColumnSymbol::Box );
        symbol->setLineWidth( 2 );
        symbol->setFrameStyle( QwtColumnSymbol::Raised );
        symbol->setPalette( QPalette( colors[i] ) );
        d_barChartItem->setSymbol( i, symbol );
    }
    QVector< QVector<double> > series;
    for ( int i = 0; i < numSamples; i++ )
    {
        QVector<double> values;
        for ( int j = 0; j < numBars; j++ )
            values += ( 2 + qrand() % 8 );
        series += values;
    }
    d_barChartItem->setSamples( series );
}
setMode实现
void BarChart::setMode( int mode )
{
    if ( mode == 0 )
    {
        d_barChartItem->setStyle( QwtPlotMultiBarChart::Grouped );
    }
    else
    {
        d_barChartItem->setStyle( QwtPlotMultiBarChart::Stacked );
    }
}
setOrientation实现
void BarChart::setOrientation( int orientation )
{
    QwtPlot::Axis axis1, axis2;
    if ( orientation == 0 )
    {
        axis1 = QwtPlot::xBottom;
        axis2 = QwtPlot::yLeft;
        d_barChartItem->setOrientation( Qt::Vertical );
    }
    else
    {
        axis1 = QwtPlot::yLeft;
        axis2 = QwtPlot::xBottom;
        d_barChartItem->setOrientation( Qt::Horizontal );
    }
    setAxisScale( axis1, 0, d_barChartItem->dataSize() - 1, 1.0 );
    setAxisAutoScale( axis2 );
    QwtScaleDraw *scaleDraw1 = axisScaleDraw( axis1 );
    scaleDraw1->enableComponent( QwtScaleDraw::Backbone, false );
    scaleDraw1->enableComponent( QwtScaleDraw::Ticks, false );
    QwtScaleDraw *scaleDraw2 = axisScaleDraw( axis2 );
    scaleDraw2->enableComponent( QwtScaleDraw::Backbone, true );
    scaleDraw2->enableComponent( QwtScaleDraw::Ticks, true );
    plotLayout()->setAlignCanvasToScale( axis1, true );
    plotLayout()->setAlignCanvasToScale( axis2, false );
    plotLayout()->setCanvasMargin( 0 );
    updateCanvasMargins();
    replot();
}
exportChart实现
void BarChart::exportChart()
{
    QwtPlotRenderer renderer;
    renderer.exportTo( this, "barchart.pdf" );
}
下面是MainWindow类
class MainWindow: public QMainWindow
{
public:
    MainWindow( QWidget * = NULL );
private:
    BarChart *d_chart;
};
构造函数MainWindow
MainWindow::MainWindow( QWidget *parent ):
    QMainWindow( parent )
{
    d_chart = new BarChart( this );
    setCentralWidget( d_chart );
    QToolBar *toolBar = new QToolBar( this );
    QComboBox *typeBox = new QComboBox( toolBar );
    typeBox->addItem( "Grouped" );
    typeBox->addItem( "Stacked" );
    typeBox->setSizePolicy( QSizePolicy::Fixed, QSizePolicy::Fixed );
    QComboBox *orientationBox = new QComboBox( toolBar );
    orientationBox->addItem( "Vertical" );
    orientationBox->addItem( "Horizontal" );
    orientationBox->setSizePolicy( QSizePolicy::Fixed, QSizePolicy::Fixed );
    QToolButton *btnExport = new QToolButton( toolBar );
    btnExport->setText( "Export" );
    btnExport->setToolButtonStyle( Qt::ToolButtonTextUnderIcon );
    connect( btnExport, SIGNAL( clicked() ), d_chart, SLOT( exportChart() ) );
    toolBar->addWidget( typeBox );
    toolBar->addWidget( orientationBox );
    toolBar->addWidget( btnExport );
    addToolBar( toolBar );
    d_chart->setMode( typeBox->currentIndex() );
    connect( typeBox, SIGNAL( currentIndexChanged( int ) ),
             d_chart, SLOT( setMode( int ) ) );
    d_chart->setOrientation( orientationBox->currentIndex() );
    connect( orientationBox, SIGNAL( currentIndexChanged( int ) ),
             d_chart, SLOT( setOrientation( int ) ) );
}
要点总结:
- 重点掌握QwtPlotMultiBarChart的含义与使用方法
- 了解QwtPlotRender,学会如何将图像导出
 
                   
                   
                   
                   
                             本文详细介绍使用Qt的Qwt库绘制柱状图的过程,包括柱状图样式设置、数据填充及导出等功能,适用于Qt图形界面开发人员。
本文详细介绍使用Qt的Qwt库绘制柱状图的过程,包括柱状图样式设置、数据填充及导出等功能,适用于Qt图形界面开发人员。
           
       
           
                 
                 
                 
                 
                 
                
               
                 
                 
                 
                 
                
               
                 
                 扫一扫
扫一扫
                     
              
             
                   740
					740
					
 被折叠的  条评论
		 为什么被折叠?
被折叠的  条评论
		 为什么被折叠?
		 
		  到【灌水乐园】发言
到【灌水乐园】发言                                
		 
		 
    
   
    
   
             
            


 
            