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

「[Go + QML + QChart.js で素敵なチャートを表示する - Goとキュート(Qt)な日々](http://miyabishi.hatenablog.com/entry/2016/01/02/100558)」から転載。

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

# QChart.js とは

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

![qchart.png](https://qiita-image-store.s3.amazonaws.com/0/107186/87b9c083-66dd-7a37-7548-7a98862cc1a4.png)
画像は[jwintz/qchart.js · GitHub](https://github.com/jwintz/qchart.js)のREADME.mdより引用

# 環境

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

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

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

#ディレクトリ構成

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

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

# ソースコード

```go: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
}

```

```javascript: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)な日々](http://miyabishi.hatenablog.com/entry/2015/12/27/160341)」を参照してください。)

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

```go
//go:generate genqrc assets jbQuick
```

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

main.qmlでは「[Chart.js | Documentation](http://www.chartjs.org/docs/#line-chart-example-usage)」の例を参考にラインチャート表示するコードを書いています。

```javascript

        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](https://qiita-image-store.s3.amazonaws.com/0/107186/6b2fb44f-9d9e-b044-7f87-aa4f108a0362.png)


以上です。

# 参考

* [Chart.js | Documentation](http://www.chartjs.org/docs/)
* [jwintz/qchart.js · GitHub](https://github.com/jwintz/qchart.js)
* [Goでバイナリファイルにqmlをパッキングする方法 - Goとキュート(Qt)な日々](http://miyabishi.hatenablog.com/entry/2015/12/31/203753)
* [Go + QML で簡単なカウンタ作成 - Goとキュート(Qt)な日々](http://miyabishi.hatenablog.com/entry/2015/12/27/160341)