StocQt

Un gráfico bursátil configurable para 100 valores.

La aplicación StocQt presenta gráficos de tendencias para una lista personalizada de 100 valores basada en el NASDAQ-100. Permite al usuario elegir valores de una lista. Permite al usuario elegir valores de una lista. La aplicación también permite favorecer hasta 5 acciones para su uso en gráficos comparativos.

La aplicación utiliza varios tipos personalizados como Search, StockCheckBox, StockChart, StockView y SettingsView. Estos tipos presentan los datos de las acciones de forma legible y permiten al usuario personalizar el gráfico de tendencias. Por ejemplo, el usuario puede elegir ver las tendencias semanales, mensuales, trimestrales o semestrales del precio de las acciones.

La aplicación utiliza un singleton StockEngine personalizado implementado en C++ para el manejo de datos, como las solicitudes de API y las acciones favoritas. Implementa una clase APIHandler personalizada para obtener los datos en línea.

void ApiHandler::stockHistory(const QString &symbol,
                              std::function<void(QList<HistoryData>)> onComplete)

La aplicación utiliza la clase ObjectModel para acceder a los modelos de datos visuales de los que depende.

    id: mainWindow
        ...
    ListView {
        id: root
        ...
        model: ObjectModel {
            Item {
                id: stockContainer
                width: root.width
                height: root.height
                StockView {
                    id: stockView
                    anchors.fill: parent
                    visible: false
                    width: root.width
                    height: root.height
                    stateGroup: stateList
                }

                StockListView {
                    id: listView
                    visible: true
                    anchors.fill: parent
                    width: root.width
                    height: root.height
                    stateGroup: stateList
                }
            }

            FavoriteView {
                id: favoriteView
                width: root.width
                height: root.height
            }

            SettingsView {
                id: infoView
                width: root.width
                height: root.height
            }
        }
    }

El StockListModel es un modelo de datos personalizado que enumera las acciones con información básica como el ID de la acción, el nombre, el valor y el favorito. Esta aplicación utiliza este modelo de datos cuando el usuario quiere elegir otra acción de la lista.

StockView y FavoriteView son modelos de datos complejos que presentan un gráfico de tendencias para la acción seleccionada o un grupo de hasta 5 acciones. Utilizan otro tipo personalizado, StockChart o FavoriteChart, que carga los datos del StockEngine en ListModels y presenta la tendencia gráfica del precio de la acción utilizando un Surface3D, Bars3D, o Scatter3D.

Rectangle {
    id: chart
        ...
    function updateHistory(){
        updateStartDate()
        let startPoint = StockEngine.stockModel.indexOf(startDate)
        let totalPoints = StockEngine.stockModel.historyCount()

        let width = startPoint / 50
        for (let i = 0; i < totalPoints; i++) {
            let epochInDays = StockEngine.stockModel.historyDate(i, false) / 86400
            appendSurfacePoint(openModel, width, epochInDays, StockEngine.stockModel.openPrice(i))
            appendSurfacePoint(closeModel,width, epochInDays, StockEngine.stockModel.closePrice(i))
            appendSurfacePoint(highModel,width, epochInDays, StockEngine.stockModel.highPrice(i))
            appendSurfacePoint(lowModel,width, epochInDays, StockEngine.stockModel.lowPrice(i))
        }
        ...
    Surface3D {
        id: historyGraph
        ...
            Surface3DSeries {
                id: highSeries
                visible: true
                baseColor: "green"
                shading: Surface3DSeries.Shading.Flat
                drawMode: Surface3DSeries.DrawSurface
                itemLabelFormat: "Time: @xLabel High:@yLabel$"
                ItemModelSurfaceDataProxy {
                    itemModel: highModel
                    rowRole: "row"
                    columnRole: "column"
                    yPosRole: "value"
                }
            },

La SettingsView presenta información sobre la aplicación.

Para comprender mejor la aplicación, navegue por su código utilizando Qt Creator.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Proyecto de ejemplo @ code.qt.io

Véase también Aplicaciones QML.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.