2014-07-10 37 views
0

我想使用JSON数据生成条形图,我从Web服务获取,基本上我的要求是使用“JSON”数据显示“条形图”。如何使用黑莓10生成条形图本机方法

基本上我是Android开发人员,对于Blackberry 10 Native非常新,所以我对Blackberry不太了解,所以如果有人能指导我关于在Blackberry-10中生成图表。

我已经在谷歌和其他地方搜索了很多,但我没有得出任何结论。我仍然在为它寻找解决方案,所以基本上我的“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,并且基于该图。所以,同样我的图表会是这个样子

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

请帮助我,我怎么能在此基础上生成图表,其中一些我已经refered生成图形链接的是

http://elycharts.com/examples
http://g.raphaeljs.com/
How to make charts/graphs (such as line graphs, bar graphs, circle graphs), etc. in C++, Qt, QML, Blackberry 10 Cascades Beta 3 SDK?
http://devblog.blackberry.com/2014/01/conference-app-secrets-part-3-json-vs-xml/

有一件事我很清楚mentio宁是我想解决方案使用qml和C++的方式与黑莓10,所以请不要建议任何其他方法像Java和其他所有。

非常感谢您的帮助。

+0

有对BB10任何绘图库又据我所知。最简单的可能是使用容器来构建自己的图。关于我的头顶,我建议让主容器设置为绝对布局,然后为其中的每个酒吧放置容器。 – hyarion

+0

我有一个解决方案,当我回到家后可以访问我的代码库。看看这个应用程序的屏幕截图:http://appworld.blackberry.com/webstore/content/128442/?lang=en&countrycode=CA第三个显示条形图。该技术基本上是在一个QImage上绘制的,该QImage具有相当不错的绘图包,然后传输Cascades ImageView。 – Richard

+0

@Hyarion,感谢您的建议,我会尽力解决您的问题,并在我完成任务时回复您。 – user3660803

回答

3

所以在BlackBerry Support Forums上有这篇文章。所有的基础知识都在那里,但我在运行时生成的图像上做了很多工作,我决定创建一个类来封装它。根据要求,这里是一个基于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); 
    } 
} 

您还需要添加LIBS行到。亲文件:

APP_NAME = BarGraph 

CONFIG += qt warn_on cascades10 
LIBS += -lbb 

include(config.pri) 

这是结果:

enter image description here

+0

嘿理查德,谢谢你的回答,让我把它实现到我的代码中,我会尽快回复你,但是谢谢你的快速回答。谢谢你一个... – user3660803

+0

Hello Richard,你能告诉我如何实现这个完整的例子。否则,你可以提供完整的例子与“qml”和所有“C++”,因为我是非常新的黑莓10我不知道我怎么能实现这个例子。感谢您的支持。 – user3660803

+0

我不知道具体的具体情况我可能不知道你的用例,但是这应该会让你走。 – Richard