ComponentZine（ComponentOne）

スクロール表示に対応する複合グラフを持ったWPFアプリケーションの作成

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

瀬戸遥[著]

2011/09/29 14:00

ポスト

ダウンロードサンプルソース（C#） (11.0 KB)
ダウンロードサンプルソース（VB） (13.2 KB)

軸ラベルの設定

　最後に、軸ラベルを設定します。左側に表示しているY軸の軸ラベルに加え、右側にも温度表示用のY軸ラベルを追加します。

　まず、今ある左側のY軸に軸ラベルを設定します。すでにX軸のラベルを作成してある「View」要素の中に、<c1chart:ChartView.AxisY>タグを作成し、TextBlockコントロールでラベルを作成します。

<c1chart:C1Chart.View>
    <c1chart:ChartView>
    
        <!-- 既存のY軸ラベルを作成 -->
        <c1chart:ChartView.AxisY>
            <c1chart:Axis>
                <c1chart:Axis.Title>
                    <TextBlock Text="日最大需要電力（100万kW）"
                               TextAlignment="Center" Foreground="Crimson"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisY>

　この下に、右側に表示する温度表示用のY軸ラベルを作成します。既にY軸ラベルは作成してあるので、今度はもう1つ「Axis」オブジェクトを作成し、そのプロパティを設定して新しいY軸ラベルを作成します。右側に表示するには「Position」プロパティを「Far」に設定します。

<c1chart:Axis AxisType="Y" Position="Far"  Min="0" Max="49" MajorUnit="3"
              AutoMin="False" AnnoFormat="00" AnnoAngle="60">
    <c1chart:Axis.Title>
        <TextBlock Text="気温（℃）" TextAlignment="Center"
                   Foreground="BlueViolet" Margin="5"/>
    </c1chart:Axis.Title>
</c1chart:Axis>

　TextBlockコントロールでグラフの見出しを作成して、完成です。

<TextBlock Height="25" HorizontalAlignment="Left" Margin="124,12,0,0" Name="TextBlock1" 
           Text="8月の東京電力管内の1日当たりの最高気温と電力消費量" 
           VerticalAlignment="Top" Width="499" FontSize="18" />

完成した複合グラフ

XAMLコード全文

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="552" Width="996"
    xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart">
    
    <Window.Resources>
        <!-- 折れ線グラフテンプレート－ 太線 -->
        <DataTemplate x:Key="lines">
            <c1chart:Lines StrokeThickness="10" />
        </DataTemplate>
        
        <!-- 折れ線グラフ シンボルテンプレート -->
        <DataTemplate x:Key="star">
            <c1chart:Star Size="20,20" />
        </DataTemplate>
    </Window.Resources>
    
    <Grid Height="510" Width="898">
            
        <c1chart:C1Chart Height="455" HorizontalAlignment="Left" Margin="33,43,0,0"
                           Name="C1Chart1" VerticalAlignment="Top" Width="803" ChartType="Column">
            <c1chart:C1Chart.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE87341" Offset="0" />
                    <GradientStop Color="#FFF2E2F1" Offset="1" />
                </LinearGradientBrush>
            </c1chart:C1Chart.Background>
            
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="1日 2日 3日 4日 5日 6日 7日 8日 9日 10日 11日 12日 13日 14日 15日 16日 17日 18日 19日 20日 21日 22日 23日 24日 25日 26日 27日 28日 29日 30日 31日" >
 
                    <!-- 最初の系列 -->
                    <c1chart:DataSeries Label="日最大需要電力（100万kW）" 
                                        Values="35.86 37.50 39.65 40.67 41.88 42.00 42.31 46.62 48.17 49.00 48.37 44.61 40.76 39.95 40.80 41.82 45.66 49.22 41.51 33.54 32.57 34.52 39.12 42.63 39.29 41.89 34.95 37.64 40.91 41.22 41.16"
                                        ConnectionStroke="{x:Null}" ConnectionStrokeThickness="2"
                                        ConnectionFill="{x:Null}">
                        <c1chart:DataSeries.SymbolFill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFA894EB" Offset="0" />
                                <GradientStop Color="#FF5AAEE2" Offset="1" />
                            </LinearGradientBrush>
                        </c1chart:DataSeries.SymbolFill>
                    </c1chart:DataSeries>
                    <!-- ２番目の系列 -->
                    <c1chart:DataSeries Label="最高気温（℃）" 
                                        Values="27.3 29.1 29.3 31.1 31.2 32.3 34.5 33.2 33.9 34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9 25.8 23.5 22.9 30.9 32.0 29.3 31.9 27.5 29.8 29.8 31.7 30.4 "
                                        Connection="{StaticResource lines}"
                                        Symbol="{StaticResource star}"
                                        ConnectionFill="#FF30D7A0">
                        <c1chart:DataSeries.SymbolFill>
                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                <GradientStop Color="#FFD8458A" Offset="0" />
                                <GradientStop Color="#FFAD48EB" Offset="1" />
                            </LinearGradientBrush>
                        </c1chart:DataSeries.SymbolFill>
                    </c1chart:DataSeries>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            
            <c1chart:C1ChartLegend DockPanel.Dock="Right" Height="57" Width="192" />
            
            <ScrollBar Name="sb" DockPanel.Dock="Bottom" Minimum="0" Maximum="1"
                       SmallChange="0.01" LargeChange="0.1" Orientation="Horizontal"
                       ViewportSize="0.1" Value="{Binding ElementName=C1Chart1, Path=View.AxisX.Value}"
                       Height="21" Width="458" />   
            
            <c1chart:C1Chart.View>
                <c1chart:ChartView>
                    <c1chart:ChartView.AxisY>
                        <c1chart:Axis>
                            <c1chart:Axis.Title>
                                <TextBlock Text="日最大需要電力（100万kW）" TextAlignment="Center"
                                     Foreground="Crimson"/>
                            </c1chart:Axis.Title>
                        </c1chart:Axis>
                    </c1chart:ChartView.AxisY>

                    <c1chart:Axis AxisType="Y" Position="Far" Min="0" Max="49"
                                 MajorUnit="3" AutoMin="False" AnnoFormat="00" AnnoAngle="60" >
                        <c1chart:Axis.Title>
                            <TextBlock Text="気温（℃）" TextAlignment="Center" 
                                       Foreground="BlueViolet" Margin="5"/>
                        </c1chart:Axis.Title>
                     </c1chart:Axis>
                    
                     <c1chart:ChartView.AxisX>
                        <c1chart:Axis Scale="0.3">
                            <c1chart:Axis.Title>
                                <TextBlock Text="8月" TextAlignment="Center" Foreground="Crimson"/>
                            </c1chart:Axis.Title>
                        </c1chart:Axis>
                    </c1chart:ChartView.AxisX>                  
                </c1chart:ChartView>
            </c1chart:C1Chart.View>      
            
        </c1chart:C1Chart>
        
        <TextBlock Height="25" HorizontalAlignment="Left" Margin="124,12,0,0" Name="TextBlock1" 
                   Text="8月の東京電力管内の1日当たりの最高気温と電力消費量" 
                   VerticalAlignment="Top" Width="499" FontSize="18" />
    </Grid>
</Window>

まとめ

　多彩な機能を持つC1Chartコントロールは、それらの機能を組み合わせて使うことができます。今回は、2つのデータ系列で複合グラフを作成しましたが、さらにチャートを重ね合わせることも可能ですし、違うタイプのチャートで表現することもできます。

参考文献

この記事は参考になりましたか？

印刷用を表示

ポスト

ComponentZine（ComponentOne）連載記事一覧: 【ComponentOne Data Services活用術】kintoneのデータをWi...

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応！サン...

WPF／WinFormsアプリをマイグレーションして、ComponentOneを利用したモ...

もっと読む

この記事の著者: 瀬戸遥（セトハルカ）

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事