如何使用Blackberry 10 Native方法生成條形圖

Question

我試圖使用從Web服務獲得的JSON數據生成條形圖，基本上我的要求是使用“ JSON”數據顯示“條形圖”。

基本上，我是Android開發人員，而且是Blackberry 10 Native的新手，所以我對Blackberry的了解不多，因此，如果有人可以指導我有關在Blackberry-10中生成圖形的信息。

我在Google以及我能找到的所有其他地方進行了很多搜索，但未得出任何結論。 我仍然在尋找解決方案，所以基本上我的“ JSON”數據采用以下格式。

{"Ax":"3:41","Ay":"04:41","Bx":"10:47 ","By":"12:47","Cx":"18:30","Cy":"19:30","Az":3,"Bz":2,"Cz":1,"condition":2}

在這里， "Ax":"3:41","Ay":"04:41"這是參數，表示開始和結束工作的小時數，最后像"Az":3,"Bz":2,"Cz":1一樣計算小時總數"Az":3,"Bz":2,"Cz":1並據此生成圖形。 所以類似地，我的圖看起來像這樣

http://postimg.org/image/nb6dnpwax/

請幫助我如何基於此生成圖形，我引用生成圖形的一些鏈接是

http://elycharts.com/examples
http://g.raphaeljs.com/
如何在C ++，Qt，QML，Blackberry 10 Cascades Beta 3 SDK中制作圖表/圖形（例如折線圖，條形圖，圓形圖）等？
http://devblog.blackberry.com/2014/01/conference-app-secrets-part-3-json-vs-xml/

我要明確提到的一件事是，我想在Blackberry-10上使用qml和C ++方式解決方案，因此請不要建議任何其他方法，如Java和其他所有方法。

預先感謝您對我的幫助。

Answer 1

所以BlackBerry支持論壇上有這篇文章。 所有基本知識都在那里，但是我對運行時生成的圖像做了很多工作，因此決定創建一個類來封裝它。 根據要求，這里是一個基於Cascades模板的簡單示例。 您還應該在以下位置熟悉文檔：

• http://qt-project.org/doc/qt-4.8/
• https://developer.blackberry.com/native/documentation/cascades/

以及BlackBerry GIT Hub上的示例文件。

QML文件：

/*
 * Copyright (c) 2011-2014 BlackBerry Limited.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import bb.cascades 1.2

Page {
    Container {
        layout: DockLayout {

        }
        Label {
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Bar Graph") + Retranslate.onLocaleOrLanguageChanged
            textStyle.base: SystemDefaults.TextStyles.BigText
            horizontalAlignment: HorizontalAlignment.Center
        }
        ImageView {
            objectName: "barGraph"
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}

這是頭文件：

 /*
 * DrawableImage.hpp
 *
 *  Created on: Jul 11, 2014
 *      Author: richard
 */

#ifndef DRAWABLEIMAGE_HPP_
#define DRAWABLEIMAGE_HPP_

#include <bb/ImageData>
#include <QtGui/QImage>
#include <bb/cascades/ImageView>

namespace net
{
    namespace test
    {

        class DrawableImage : public QImage
        {
        public:
            DrawableImage();
            DrawableImage(QSize imageSize, QImage::Format format);
            virtual ~DrawableImage();

            void    emitRenderingBegin();
            void    emitRenderingFinished();

            DrawableImage&  operator = (const QImage &image) { QImage::operator =(image); return *this; }

            QPainter        &painter();

        public:
            void    updateToView(bb::cascades::ImageView *imageView);

        private:
                void    deleteBuffer();

                QPainter        m_painter;
                QSize           m_sizeInPixels;
                unsigned char*  m_buffer; // pixel data in PixelBufferData format
        };

    } /* namespace test */
} /* namespace net */

#endif /* DRAWABLEIMAGE_HPP_ */

和cpp文件：

/*
 * DrawableImage.cpp
 *
 *  Created on: Jul 11, 2014
 *      Author: richard
 */

#include <src/DrawableImage.hpp>

namespace net
{
    namespace test
    {

        DrawableImage::DrawableImage()
            : m_painter(), m_sizeInPixels(0,0), m_buffer(NULL)
        {
            // TODO Auto-generated constructor stub

        }

        DrawableImage::DrawableImage(QSize imageSize, QImage::Format format)
            : QImage(imageSize, format), m_painter(), m_sizeInPixels(0,0), m_buffer(NULL)
        {

        }


        DrawableImage::~DrawableImage() {
            // TODO Auto-generated destructor stub
        }

        /*
        void DrawableImage::emitRenderingBegin() {
            emit renderingBegin();
        }

        void DrawableImage::emitRenderingFinished() {
            emit renderingFinished();
        }
        */

        QPainter& DrawableImage::painter() {
            if (!m_painter.isActive()) {
                m_painter.begin(this);
            }

            return m_painter;
        }

        void DrawableImage::deleteBuffer()
        {
            if (m_buffer != 0)
            {
                delete [] m_buffer;
                m_buffer = 0;
            }
        }

        void    DrawableImage::updateToView(bb::cascades::ImageView *imageView) {
            if (m_painter.isActive()) {
                m_painter.end();
            }

            Q_ASSERT(imageView != NULL);

            QImage swapped     = rgbSwapped();
            QSize  swappedSize = swapped.size();

            int w = swappedSize.width();
            int h = swappedSize.height();

            int numBytes  = w * h * 4;
            if (swappedSize != m_sizeInPixels)
            {
                deleteBuffer();
                m_sizeInPixels = QSize(w, h);
                m_buffer = new uchar[numBytes];
            }

            // Copy the memory over.
            // We'll add defensive code in case rgbSwapped has a different size
            const uchar* from = swapped.constBits();
            int numFromBytes = swapped.numBytes();
            int numToCopy = std::min(numFromBytes, numBytes);

            memcpy(m_buffer, from, numToCopy);
            if (numToCopy < numBytes)
            {
                memset(m_buffer + numToCopy, 0x00, numBytes - numToCopy);
            }

            bb::ImageData imageData = bb::ImageData::fromPixels(m_buffer, bb::PixelFormat::RGBA_Premultiplied,
                                   m_sizeInPixels.width(),
                                   m_sizeInPixels.height(),
                                   m_sizeInPixels.width() * 4);

            imageView->setImage(imageData);
        }


    } /* namespace test */
} /* namespace net */

這是applicationui.cpp（未修改applicationui.hpp）：

/*
 * Copyright (c) 2011-2014 BlackBerry Limited.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

#include "applicationui.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
#include <bb/cascades/LocaleHandler>

#include <src/DrawableImage.hpp>

using namespace bb::cascades;
using namespace net::test;

ApplicationUI::ApplicationUI() :
        QObject()
{
    // prepare the localization
    m_pTranslator = new QTranslator(this);
    m_pLocaleHandler = new LocaleHandler(this);

    bool res = QObject::connect(m_pLocaleHandler, SIGNAL(systemLanguageChanged()), this, SLOT(onSystemLanguageChanged()));
    // This is only available in Debug builds
    Q_ASSERT(res);
    // Since the variable is not used in the app, this is added to avoid a
    // compiler warning
    Q_UNUSED(res);

    // initial load
    onSystemLanguageChanged();

    // Create scene document from main.qml asset, the parent is set
    // to ensure the document gets destroyed properly at shut down.
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // Create root object for the UI
    AbstractPane *root = qml->createRootObject<AbstractPane>();

    /*
     * This code exercises the DrawableImage
     */
    QSize   graphImageSize(700, 700);
    DrawableImage    graph;
    ImageView* graphImageView = root->findChild<ImageView*>("barGraph");

    // Initialise graph and fill with transparent black.
        graph = QImage(graphImageSize, QImage::Format_ARGB32_Premultiplied);
        graph.fill(Qt::black);

        // Set the background mode
        graph.painter().setBackgroundMode(Qt::TransparentMode);

        // Set rendering hints
        graph.painter().setRenderHint(QPainter::Antialiasing, true);

        for (int i = 0; i < 10; i++) {

            int x = i * (graphImageSize.width()/10);
            int h = i * (graphImageSize.height()/10) + graphImageSize.height()/20;
            int w = graphImageSize.width()/10 - 20;

            graph.painter().fillRect( x + 10, graphImageSize.height()-h, w, h, Qt::darkGreen);
        }

    // Once the image is drawn transfer it to the Cascades ImageView
    graph.updateToView(graphImageView);

    // Set created root object as the application scene
    Application::instance()->setScene(root);
}

void ApplicationUI::onSystemLanguageChanged()
{
    QCoreApplication::instance()->removeTranslator(m_pTranslator);
    // Initiate, load and install the application translation files.
    QString locale_string = QLocale().name();
    QString file_name = QString("BarGraph_%1").arg(locale_string);
    if (m_pTranslator->load(file_name, "app/native/qm")) {
        QCoreApplication::instance()->installTranslator(m_pTranslator);
    }
}

您還需要在.pro文件中添加LIBS行：

APP_NAME = BarGraph

CONFIG += qt warn_on cascades10
LIBS += -lbb

include(config.pri)

結果如下：