Help us understand the problem. What is going on with this article?

Go + QML + QChart.js で素敵なチャートを表示する

More than 3 years have passed since last update.

Go + QML + QChart.js で素敵なチャートを表示する - Goとキュート(Qt)な日々」から転載。

Go と QML と QChart.js を使って素敵なチャートを表示してみます。

QChart.js とは

QChart.js とは、jwintz/qchart.js · GitHubで開発されているQMLでチャートを表示するためのJavaScriptライブラリです。

qchart.png
画像はjwintz/qchart.js · GitHubのREADME.mdより引用

環境

  • go version go1.5.2 darwin/amd64
  • Qt 5.5.1
  • OS El Capitan

準備

jwintz/qchart.js · GitHubからQChart.jsのプロジェクトごとダウンロードしてきます。
ドキュメントのSetupの項目では自分のgitプロジェクトにサブモジュールとして追加する方法しか書かれていませんが、単純にzipでダウンロードして問題ありません。

今回はダウンロードしたファイルを展開したのち、展開したディレクトリを"Charts"という名前に便宜上変更しておきましょう。

ディレクトリ構成

goのソースコードと同じディレクトリ下にassetsディレクトリとjbQuickディレクトリを作成し、それぞれにQMLファイルとjwintz/qchart.js · GitHubからダウンロードしてきたzipファイルを展開したものを配置します。

┣main.go ・・・ソースコード
┣assets/
┃┗main.qml・・・QMLファイル
┗jbQuick/
 ┗Charts/ ・・・GitHubからダウンロードしてきたzipファイルを展開したもの
  ┣QChart.js
  ┣QChart.qml
   ・
   ・
   ・

ソースコード

main.go
package main

//go:generate genqrc assets jbQuick

import(
    "gopkg.in/qml.v1"
    "fmt"
)

// --------------------------------------------------
// main
// --------------------------------------------------
func main() {
    err := qml.Run(run)
    if nil != err {
        fmt.Println(err)
    }
}

// --------------------------------------------------
// run関数
// --------------------------------------------------
func run() error {
    engine := qml.NewEngine()
    component, err := engine.LoadFile("qrc:///assets/main.qml")
    if err != nil {
        return err
    }

    win := component.CreateWindow(nil)
    win.Show()
    win.Wait()
    return nil
}

main.qml
import QtQuick 2.0
import QtQuick.Controls 1.4
import jbQuick.Charts 1.0

ApplicationWindow {
    width:  640
    height: 480

    Rectangle {
        anchors.fill: parent
        color: "white"

        Chart {
            id: chart_line;
            width: 640;
            height: 400;
            anchors.centerIn: parent

            chartAnimated: true;
            chartAnimationEasing: Easing.InOutElastic;
            chartAnimationDuration: 2000;
            chartType: Charts.ChartType.LINE;
            Component.onCompleted: {
                chartData = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets:[
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                }
            }
        }
    }
}

簡単な説明

"main.go"では特に変わったことはしていません。(Go+QMLの基本的な内容に関しては「Go + QML で簡単なカウンタ作成 - Goとキュート(Qt)な日々」を参照してください。)

QChart.jsはパッキングしないと動作しないため、"main.go"に以下の1行を追加します。

//go:generate genqrc assets jbQuick

この1行ではjbQuickディレクトリ下とassetsディレクトリをgenqrcコマンドを用いてパッキングしています。(genqrcについては「Goでバイナリファイルにqmlをパッキングする方法 - Goとキュート(Qt)な日々」を参照してください。)

main.qmlでは「Chart.js | Documentation」の例を参考にラインチャート表示するコードを書いています。

        Chart {
            id: chart_line;
            width: 640;
            height: 400;
            anchors.centerIn: parent

            chartAnimated: true;
            chartAnimationEasing: Easing.InOutElastic;
            chartAnimationDuration: 2000;
            chartType: Charts.ChartType.LINE;
            Component.onCompleted: {
                chartData = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets:[
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                }
            }
        }

実行結果

main.goのあるディレクトリで、コンソール画面を開き以下を実行します。

go generate
go build

その後、ディレクトリ下に実行ファイルが生成されるので、それを実行すると以下のグラフが表示されます。

スクリーンショット 2016-01-01 21.50.46.png

以上です。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away