locked
toolkitのline chart, column chartで常に数値を表示する方法 RRS feed

  • 質問

  • こんにちは よしぼんです。

     

    silverlight4 toolkitにあるラインチャート、カラムチャートなんですが、

    マウスカーソルをライン上に乗せると値のツールチップが表示されます。

    このツールチップを常に表示させるか、ライン上に数値を表示する方法を

    教えてください。 Custom Styleを設定するのかな?と思い、ヘルプ

    ファイルを見たのですが、判りませんでした。

    よろしくお願い致します。

     

    --

    よしぼん


    YoShiBon
    2011年4月12日 5:07

回答

  • 常に値を表示する目的なのであれば、ライン上に数値を表示する方法が良いと思います。

    ColumnSeriesであれば、DataPointStyleにColumnDataPoint型のスタイルを設定し、ControlTemplateで数値を表示する仕組みを入れれば簡単に表示する事が可能です。

     

    <Style x:Key="ColumnDataPointStyle1" TargetType="toolkit:ColumnDataPoint">
    	<Setter Property="Background" Value="Orange"/>
    	<Setter Property="BorderBrush" Value="Black"/>
    	<Setter Property="BorderThickness" Value="1"/>
    	<Setter Property="IsTabStop" Value="False"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="toolkit:ColumnDataPoint">
    				<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
    					<ToolTipService.ToolTip>
    						<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
    					</ToolTipService.ToolTip>
    					<VisualStateManager.VisualStateGroups>
    						<VisualStateGroup x:Name="CommonStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.1"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Normal"/>
    							<VisualState x:Name="MouseOver">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="SelectionStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.1"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Unselected"/>
    							<VisualState x:Name="Selected">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="RevealStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.5"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Shown">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
    								</Storyboard>
    							</VisualState>
    							<VisualState x:Name="Hidden">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    					</VisualStateManager.VisualStateGroups>
    					<Grid Background="{TemplateBinding Background}">
    						<Rectangle>
    							<Rectangle.Fill>
    								<LinearGradientBrush>
    									<GradientStop Color="#77ffffff" Offset="0"/>
    									<GradientStop Color="#00ffffff" Offset="1"/>
    								</LinearGradientBrush>
    							</Rectangle.Fill>
    						</Rectangle>
    						<Border BorderBrush="#ccffffff" BorderThickness="1">
    							<Border BorderBrush="#77ffffff" BorderThickness="1"/>
    						</Border>
    						<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
    						<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
    						<!-- 数値を表示する為のTextBlock -->
    						<TextBlock Margin="0" TextWrapping="Wrap" Text="{TemplateBinding FormattedDependentValue}" VerticalAlignment="Bottom" RenderTransformOrigin="0,0" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left">
    							<TextBlock.RenderTransform>
    								<CompositeTransform Rotation="-90"/>
    							</TextBlock.RenderTransform>
    						</TextBlock>
    					</Grid>
    				</Border>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
    

    上記XAMLは、ColumnDataPointのデフォルトのStyleをコピーしたものです。そこに数値表示用のTextBlockを割り込ませてあります。
    表示位置やレイアウトは調整していません。 

    ただし、問題なのが「グラフのサイズは可変」である事から、フラグ値が小さい場合には数値も見切れたりします。
    ここらへんは工夫をして頂ければなんとでもなると思います。 

    Expression BlendがあるとこういったStyleの編集やControlTemplateの編集が凄く楽になりますので、お勧めです。
    (自力で既存のStyleを解析していくには時間が掛かりますからね・・) 


    ★良い回答には回答済みマークを付けよう! Blog : http://blogs.wankuma.com/kzt/ Blog : http://www.blogs.uxlabo.net/kazuto/

    • 回答としてマーク よしぼん 2011年4月13日 9:40
    2011年4月13日 2:25

すべての返信

  • 常に値を表示する目的なのであれば、ライン上に数値を表示する方法が良いと思います。

    ColumnSeriesであれば、DataPointStyleにColumnDataPoint型のスタイルを設定し、ControlTemplateで数値を表示する仕組みを入れれば簡単に表示する事が可能です。

     

    <Style x:Key="ColumnDataPointStyle1" TargetType="toolkit:ColumnDataPoint">
    	<Setter Property="Background" Value="Orange"/>
    	<Setter Property="BorderBrush" Value="Black"/>
    	<Setter Property="BorderThickness" Value="1"/>
    	<Setter Property="IsTabStop" Value="False"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="toolkit:ColumnDataPoint">
    				<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
    					<ToolTipService.ToolTip>
    						<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
    					</ToolTipService.ToolTip>
    					<VisualStateManager.VisualStateGroups>
    						<VisualStateGroup x:Name="CommonStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.1"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Normal"/>
    							<VisualState x:Name="MouseOver">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="SelectionStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.1"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Unselected"/>
    							<VisualState x:Name="Selected">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="RevealStates">
    							<VisualStateGroup.Transitions>
    								<VisualTransition GeneratedDuration="0:0:0.5"/>
    							</VisualStateGroup.Transitions>
    							<VisualState x:Name="Shown">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
    								</Storyboard>
    							</VisualState>
    							<VisualState x:Name="Hidden">
    								<Storyboard>
    									<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
    								</Storyboard>
    							</VisualState>
    						</VisualStateGroup>
    					</VisualStateManager.VisualStateGroups>
    					<Grid Background="{TemplateBinding Background}">
    						<Rectangle>
    							<Rectangle.Fill>
    								<LinearGradientBrush>
    									<GradientStop Color="#77ffffff" Offset="0"/>
    									<GradientStop Color="#00ffffff" Offset="1"/>
    								</LinearGradientBrush>
    							</Rectangle.Fill>
    						</Rectangle>
    						<Border BorderBrush="#ccffffff" BorderThickness="1">
    							<Border BorderBrush="#77ffffff" BorderThickness="1"/>
    						</Border>
    						<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
    						<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
    						<!-- 数値を表示する為のTextBlock -->
    						<TextBlock Margin="0" TextWrapping="Wrap" Text="{TemplateBinding FormattedDependentValue}" VerticalAlignment="Bottom" RenderTransformOrigin="0,0" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left">
    							<TextBlock.RenderTransform>
    								<CompositeTransform Rotation="-90"/>
    							</TextBlock.RenderTransform>
    						</TextBlock>
    					</Grid>
    				</Border>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
    

    上記XAMLは、ColumnDataPointのデフォルトのStyleをコピーしたものです。そこに数値表示用のTextBlockを割り込ませてあります。
    表示位置やレイアウトは調整していません。 

    ただし、問題なのが「グラフのサイズは可変」である事から、フラグ値が小さい場合には数値も見切れたりします。
    ここらへんは工夫をして頂ければなんとでもなると思います。 

    Expression BlendがあるとこういったStyleの編集やControlTemplateの編集が凄く楽になりますので、お勧めです。
    (自力で既存のStyleを解析していくには時間が掛かりますからね・・) 


    ★良い回答には回答済みマークを付けよう! Blog : http://blogs.wankuma.com/kzt/ Blog : http://www.blogs.uxlabo.net/kazuto/

    • 回答としてマーク よしぼん 2011年4月13日 9:40
    2011年4月13日 2:25
  • 和人さん

    よしぼんです。

    こんなときにExpression Blendが役に立つのですね

    早速、試してみたいと思います。

    回答ありがとうございました。

     

    --

    よしぼん

     


    YoShiBon
    2011年4月13日 9:40