Java開発者のためのCurl入門－グラフの描画

第4回

色の変更

　今度は、棒グラフのバーの色を変更してみましょう。棒グラフの色を変更するには、いったんBarLayerを定義します。

　定義したBarLayerに対し、append-color-associationメソッドを呼ぶことで色を変更することが可能です。

BarLayerを定義するコード

{let bl:BarLayer = 
    {BarLayer
          {ChartDataSeries records, "height"}
        , {ChartDataSeries records, "weight"}
        , x-axis-data = {ChartDataSeries records, "name"}

    }
}

　下記のコードでは、予め定義されている色（"blue"）を使用していますが、RGBの値のように任意の色を指定することも可能です。

棒グラフの色を変更するコード（色名による指定）

{bl.append-color-association
    {DataSeriesColorPair
        {ChartDataSeries records, "height"}
        , "blue"
    }
}

　RGBで色を指定するには、FillPatternクラスを使用します。

棒グラフの色を変更するコード（RGBによる指定）

{bl.append-color-association
    {DataSeriesColorPair
        {ChartDataSeries records, "weight"}
        , {FillPattern {Color.from-rgb 1.3, 0.3, 0.2}}
    }
}

　実は、先ほどの"blue"が文字列として指定可能なのは、FillPatternに定数として定義されているためなのです。FillPatternには、blueという青を表すクラス定数が存在しています。

棒グラフの色を変更するコード（全体）

{curl 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}

{import * from CURL.GUI.CHARTS}
{let records:RecordSet =
    {RecordSet
        {RecordFields
              {RecordField "name",   caption = "name",   domain = String}
            , {RecordField "height", caption = "height", domain = int}
            , {RecordField "weight", caption = "weight", domain = int}
        }
        , {RecordData name = "Smith", height = 170, weight = 80}
        , {RecordData name = "Allen", height = 200, weight = 100}
        , {RecordData name = "Scott", height = 165, weight = 50}
        , {RecordData name = "James", height = 175, weight = 60}
    }
}
{let bl:BarLayer = 
    {BarLayer
          {ChartDataSeries records, "height"}
        , {ChartDataSeries records, "weight"}
        , x-axis-data = {ChartDataSeries records, "name"}

    }
}
{let chart:LayeredChart =
    {LayeredChart
          width = 20cm
        , height = 6cm
        , left-axis =
            {ChartAxis
                  {ChartDataSeries records, "height"}
                , {ChartDataSeries records, "weight"}
            }
        , bl
    }
}
{bl.append-color-association
    {DataSeriesColorPair
        {ChartDataSeries records, "height"}
        , "blue"
    }
}
{bl.append-color-association
    {DataSeriesColorPair
        {ChartDataSeries records, "weight"}
        , {FillPattern {Color.from-rgb 1.3, 0.3, 0.2}}
    }
}
{value chart}

まとめ

　Java技術のみを使用する場合と比べ、CurlのChartコンポーネントを利用すると、グラフの表示が容易にできます。

　今回は、グラフに表示するデータをコードとして直接定義しましたが、次回は、CSVファイルのデータをグラフとして表示する方法や、サーバーサイドのデータとの連携方法を説明していきます。

　また、今回のチャートプログラムなどについてCurlで学習する際には、「ヘルプ」を使うと便利です。Curl用統合開発環境「Curl IDE」（無償）にはヘルプが同梱されており、インストールすることで閲覧できるようになります。

　このヘルプは、「ヘルプに記載されたCurlアプリケーションサンプルがヘルプ上で動作する」という使い勝手のよいものになっており、あわせて記載されているサンプルソースを書き換えることで、アプリケーションの動作を変化させることができます。これにより、ヘルプを読み進めていくだけで、インタラクティブなCurlの学習が可能となっています。こちらもぜひ試してください。

参考サイト

• Curl Developer Center グラフの解説