Kohshi's Blog: QCustomPlotがいい感じ


最近色々な機会で[Qt](http://qt-project.org/)を使う機会が増えたんだが、
いろいろ使ってるうちに手軽にグラフを描画したいケースがけっこうでてきた。

これまでは[QWT](http://qwt.sourceforge.net/)を使っていたんだが、
単純な棒グラフ作るだけでもわりと手続きが多くてめんどくさいのが難点。
あとドキュメントもいまいち。

で、代わりを探してみると[QCustomPlot](http://www.qcustomplot.com)っていうのを
最近よく見かけるようになってて、わりと評判もよさそうなんで使ってみた。

準備としては[QCustomPlot](http://www.qcustomplot.com)にアクセスしてDownloadのページから
最新のパッケージをダウンロードし、その中から

* qcustomplot.h
* qcustomplot.cpp

を持ってきてプロジェクトに追加するだけ。

まず、Qt Designerでグラフを表示させたい箇所にWidget(QWidget)を配置。
配置したら、右クリックして格上げ先を指定を選択↓
  
  
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwdk8FonPhe3tOCElnItTuwJvset7oq__qXtKsmQaZj3apSk1487WtgEJa0BqT9PtlgqKZgz-cU0WG_0oaTvcH-Fwd8P-wby7IMl6vILaF3hwdmI30AzpU4iYRTEaNEThf2XlrLrXR2jP/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.26.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwdk8FonPhe3tOCElnItTuwJvset7oq__qXtKsmQaZj3apSk1487WtgEJa0BqT9PtlgqKZgz-cU0WG_0oaTvcH-Fwd8P-wby7IMl6vILaF3hwdmI30AzpU4iYRTEaNEThf2XlrLrXR2jP/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.26.18.png" /></a></div>
  
  
格上げ先にQCustomPlotとqcostomplot.hを指定して「追加」を押し
  
  
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwU8TApC8y-xfqbUIoF1qkcDKFS86IGtwyV8hrrauO-Q8mvDNwwvPi5FjK9IAS2hiMcaIRGH4KQvXtmGmRlFJDcU6NdJZxQmZmtD889GUW9IvHqBss_9IGFyzH3X5N32LvI5Pzp_m64WV/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.28.48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwU8TApC8y-xfqbUIoF1qkcDKFS86IGtwyV8hrrauO-Q8mvDNwwvPi5FjK9IAS2hiMcaIRGH4KQvXtmGmRlFJDcU6NdJZxQmZmtD889GUW9IvHqBss_9IGFyzH3X5N32LvI5Pzp_m64WV/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.28.48.png" /></a></div>
  
  
追加されたQCustomPlotを選択して「格上げ」。
  
  
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZ93fN85mcyy0L3WSxO9BiO4tzIkh6EOUMrQhNvcn8jxb7zqo60GVGCUIu_h_GrLNXjiy9mY4yPJPaIpn62saltl2Pmcs8IhJktKut-KdRMJcOqDx7JuNJ2v3l3DCPSlWNu1SK_otAZaa/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.30.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZ93fN85mcyy0L3WSxO9BiO4tzIkh6EOUMrQhNvcn8jxb7zqo60GVGCUIu_h_GrLNXjiy9mY4yPJPaIpn62saltl2Pmcs8IhJktKut-KdRMJcOqDx7JuNJ2v3l3DCPSlWNu1SK_otAZaa/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2013-12-12+23.30.13.png" /></a></div>
  
  
名前を例えばhistogramとかにしてDesignerでの作業は完了。
  
  
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNqHOVrV-7j7YzSSsBLhReb6L1d6MVl_RaBoTWg_EgaM2vX72zUb3stNEgyDADEvjHq1XcoonuePPT_MSS8PBAgFk23SxRV-8eRcEGY3oAs6sUXpFB9v-f4zUGefYi44nG9uJccFo3gH1/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.34.17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNqHOVrV-7j7YzSSsBLhReb6L1d6MVl_RaBoTWg_EgaM2vX72zUb3stNEgyDADEvjHq1XcoonuePPT_MSS8PBAgFk23SxRV-8eRcEGY3oAs6sUXpFB9v-f4zUGefYi44nG9uJccFo3gH1/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.34.17.png" /></a></div>
  
  
例えばヒストグラムを表示させたい場合にはQCPBarsを使う
  
  
クラスメンバにQCPBars（QCPBars *mpHistogramBars）を追加し、コンストラクタでのように初期化する。
  
  
```cpp: MainWindow.h

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

```
  
  
```cpp: MainWindow.cpp

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

    mpHistogramBars = new QCPBars(ui.histogram->xAxis, ui.histogram->yAxis);
    mpHistogramBars->setPen(QPen(Qt::gray));// 色指定
    mpHistogramBars->setBrush(QBrush(Qt::gray));// 色指定
    ui.histogram->addPlottable(mpHistogramBars);// 追加
}

```
  
  
あとは、描画したいタイミングで以下のようにQVector<double>を使ってデータをセットする。
  
  
```cpp: MainWindow.cpp

void MainWindow::drawHistogram(const QImage &image){
    QVector<double> keys(256);
    QVector<double> values(256);
    for(int i = 0; i < keys.size(); i++){
        keys[i] = i;
        values[i] = 0;
    }
    for(int j = 0; j < image.height(); j++){
        for(int i = 0; i < image.width(); i++){
            QRgb rgb = image.pixel(i, j);// RGB -> Y
            int y = qBound(0, (int)(0.299 * qRed(rgb) + 0.587 * qGreen(rgb) + 0.114 * qBlue(rgb) + 0.5), 255);
            values[y] += 1.0;
        }
    }
    mpHistogramBars->setData(keys, values);
    ui.histogram->rescaleAxes();
    ui.histogram->replot();
}

```
  
  
QCustomPlotでは基本的にデータはdoubleで指定するもよう。
実行すると以下のような感じのヒストグラムが表示される。
（ただし、グラフ中の赤丸と座標点は表示されない。結構グラフを表示した後にマウスホバーで値を見たい場合はあるので、これの表示の仕方はまた別途）
  
  

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3paLvesw7e7ZnoNDd0hphEGJk2zozqK1OOvSbuWw9uaFEw_MC072Eax-cRujOzSPZMQ3MXaXnm2iFzvPrzf8gvhxBSb8s0yI1iMmYIg747SM6Y7oe9xPi_L54WSCKJtrntBQ5DHQm71r/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.45.37.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3paLvesw7e7ZnoNDd0hphEGJk2zozqK1OOvSbuWw9uaFEw_MC072Eax-cRujOzSPZMQ3MXaXnm2iFzvPrzf8gvhxBSb8s0yI1iMmYIg747SM6Y7oe9xPi_L54WSCKJtrntBQ5DHQm71r/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.45.37.png" /></a></div>
  
  
結構見栄えがいい。
複数表示もいい感じにできます。
  
  
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTV02Bwyo28scMNXhcExeaNlkPTGvfb_9ab_IFJ8oVYMLwXGxtBYKqMPnaa8GaccX6naNFkY4dA6Fx6Ln_Fm3y8puH5K8C8JtniksKEHScsAGLX6XoXsskZdip5QTn3rKbnUowzaCjZbm/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.49.14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTV02Bwyo28scMNXhcExeaNlkPTGvfb_9ab_IFJ8oVYMLwXGxtBYKqMPnaa8GaccX6naNFkY4dA6Fx6Ln_Fm3y8puH5K8C8JtniksKEHScsAGLX6XoXsskZdip5QTn3rKbnUowzaCjZbm/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-12-12+23.49.14.png" /></a></div>
  
  

QWTだとsetIntervalだとか結構わかりにくいコードをいっぱいかかないといけなかった・・。
それとくらべてQCustomPlotは直感的でわかりやすいし、簡単！
  

次はQItemTracerでマウスホバーのやり方でもまとめる予定。
Kohshi's Blog

2013/12/12

QCustomPlotがいい感じ

0 件のコメント:
