• QtitanRibbon| 下載試用: 遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面

運行示例

要從Qt Creator運行示例，請打開歡迎模式并從示例中選擇示例。有關更多信息，請訪問構建和運行示例。

將數據模型與條形圖結合使用

讓我們從創建 CustomTableModel 類的實例開始。CustomTableModel 類派生自QAbstractTableModel，它是為本示例而創建的。此類的構造函數使用圖表示例所需的數據填充模型的內部數據存儲。

m_model = new CustomTableModel;

我們現在有一個模型，其中包含我們希望在圖表和QTableView 中顯示的數據。首先，我們創建QTableView并告訴它使用模型作為數據源。為了很好地呈現數據，設置了表格視圖的最小寬度，并將其標題調整大小模式更改為拉伸。

QTableView *tableView = new QTableView;
tableView->setModel(m_model);
tableView->setMinimumWidth(300);
tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
tableView->verticalHeader()->setSectionResizeMode(QHeaderView::Stretch);
m_model->setParent(tableView);

 現在我們需要一個QChart實例來在圖表上顯示相同的數據。我們還啟用動畫。它可以更輕松地查看對模型數據的修改如何影響圖表。

QChart *chart = new QChart;
chart->setAnimationOptions(QChart::AllAnimations);

下面代碼的第一行創建了新的柱狀圖系列。變量 firstRow 和 rowCount 用于定義自定義模型映射。自定義映射允許僅從模型中獲取部分數據。在這種情況下，從索引為 3 的行開始的 5 行數據。以下三行創建QVBarModelMapper類的實例，并指定條形集的數據應從索引為 1 到 4 的模型的列中獲取（包括的）。為了在系列和模型之間建立連接，我們將這兩個對象都設置為QVBarModelMapper。

最后將系列添加到圖表中。

QBarSeries *series = new QBarSeries;

int first = 3;
int count = 5;
QVBarModelMapper *mapper = new QVBarModelMapper(this);
mapper->setFirstBarSetColumn(1);
mapper->setLastBarSetColumn(4);
mapper->setFirstRow(first);
mapper->setRowCount(count);
mapper->setSeries(series);
mapper->setModel(m_model);
chart->addSeries(series);

為了在QTableView中顯示哪些數據對應于哪個條形集，本示例使用表格著色。當系列添加到圖表時，它會根據當前選擇的主題分配一種顏色。下面的代碼從系列中提取該顏色并使用它來創建彩色QTableView。視圖的著色不是QChart功能的一部分。

QString seriesColorHex = "#000000";

// get the color of the series and use it for showing the mapped area
QList<QBarSet *> barsets = series->barSets();
for (int i = 0; i < barsets.count(); i++) {
    seriesColorHex = "#" + QString::number(barsets.at(i)->brush().color().rgb(), 16).right(6).toUpper();
    m_model->addMapping(seriesColorHex, QRect(1 + i, first, 1, barsets.at(i)->count()));
}

我們希望在圖表的軸上放置類別來描述數據的含義。下一個片段展示了如何做到這一點。

QStringList categories;
categories << "April" << "May" << "June" << "July" << "August";
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->addAxis(axisX, Qt::AlignBottom);
series->attachAxis(axisX);
QValueAxis *axisY = new QValueAxis();
chart->addAxis(axisY, Qt::AlignLeft);
series->attachAxis(axisY);

為了避免設置QGraphicsScene，我們使用QChartView類為我們完成。所述QChart對象指針被用作一個參數QChartView構造函數。為了使渲染看起來更好，打開抗鋸齒并設置圖表視圖小部件的最小尺寸。

QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->setMinimumSize(640, 480);

最后，我們將兩個小部件放在一個布局中，并將該布局用作應用程序布局。

QGridLayout *mainLayout = new QGridLayout;
mainLayout->addWidget(tableView, 1, 0);
mainLayout->addWidget(chartView, 1, 1);
mainLayout->setColumnStretch(1, 1);
mainLayout->setColumnStretch(0, 0);
setLayout(mainLayout);

應用程序已準備就緒。嘗試修改表格視圖中的數據，看看它如何影響圖表。

====================================================

想要了解或購買Qt正版授權的朋友，歡迎

Qt技術交流群現已開通，QQ搜索群號“765444821”或者掃描下方二維碼即可加入