CodeZine(コードジン)

特集ページ一覧

マウスイベントに対応したグラフを持つWPFアプリケーションの作成

ComponentOne Studio Enterprise 2011JのC1Chartコントロールを使ったWPFアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/21 14:00
目次

WPFアプリケーションの作成

 では、さっそくC1Chartコントロールを使ってWPFアプリケーションを作成しましょう。

GUIのデザイン

 今回作成するアプリケーションは、東京都の8月の最高・最低気温を折れ線グラフにします。折れ線グラフは、緩やかなラインとし、最高気温と最低気温で線の色とシンボルの形状を変えます。全体の配色はテーマを使用しますが、カラーパレットを変えてカスタム化します。

 また、マウスポインタをシンボルに重ねると、シンボルを強調表示するようなイベント処理を加えます。使用するコントロールは、C1ChartコントロールとTextBlockコントロールだけです。

コントロールのレイアウト
コントロールのレイアウト

C1Chartコントロールの設定

 作業のメインは、C1Chartコントロールの設定です。デフォルトの設定から、徐々にデザインを変えていきます。

系列データの変更

 C1Chartコントロールをツールボックスからページにドラッグ&ドロップします。ウィンドウサイズを変え、C1Chartコントロールもウィンドウに合わせて広げます。

 C1Chartコントロールには、デフォルトでダミーのデータが挿入され、縦棒グラフが作成されています。

<Window x:Class="WPF_C1Chart_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart"
        Title="Window1" Height="610" Width="869" FontSize="16" >
    
    <Grid>
        <c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                         VerticalAlignment="Top" Width="791">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="P1 P2 P3 P4 P5">
                    <c1chart:DataSeries Label="Series 1" Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="Series 2" Values="8 12 10 12 15" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
    </Grid>
</Window>

 次に、系列データの変更です。ここでは、DataSeriesクラスのValuesプロパティの値を書き換えます。また、ChartDataクラスのItemNamesプロパティの値を変えると、横軸にあるデータ名が変更されます。「AxisX」「AxisY」プロパティで軸ラベルを設定します。この時点で、縦棒グラフのデータと軸ラベルが変更されます。

<c1chart:C1Chart.Data>
    <c1chart:ChartData ItemNames="10日 11日 12日 13日 14日 15日 16日 17日 18日 19日">
        <c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温(℃)" 
                            AxisY="東京 8月" Label="最低気温"/>
        <c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温(℃)" 
                            AxisY="東京 8月" Label="最高気温"/>
    </c1chart:ChartData>
縦棒グラフのデータと軸ラベルが変更される
縦棒グラフのデータと軸ラベルが変更される

 そして、C1Chartコントロールを選択した状態で、プロパティウィンドウの[可視性-ChartType]プロパティをクリックし、リストから[LineSymbolsSmoothed]を選びます。これで、チャートが緩やかな曲線の折れ線グラフに変わります。

リストから[LineSymbolsSmoothed]を選ぶ
リストから[LineSymbolsSmoothed]を選ぶ
チャートが緩やかな曲線の折れ線グラフに変わる
チャートが緩やかな曲線の折れ線グラフに変わる

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5