wpf柱状图等相关技术_wpf charting 柱状图

wpf柱状图等相关技术

1.面对的问题

wpf的charting（System.Windows.Controls.DataVisualization.Charting）画图很容易，但是还是面对着一些基本问题，如：tooltip只能显示值，但是实际当中我们希望能够显示的更全面（希望有时间和值），还有就是时间轴的问题，很难控制时间轴的区间，基于这些，自己做了以下处理。

2.问题解决方案

2.1 tooltip解决方案

2.1.1 区域图形，条形图形，柱状图，线条图通过添加以下点的样式解决：

  <Style x:Key="DataPointStyle0" TargetType="chartingToolkit:DataPoint">
            <Setter Property="Background" Value="#40699C"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:DataPoint">
                        <Grid x:Name="Root" Opacity="1">
                            <ToolTipService.ToolTip>
                                <StackPanel Margin="2,2,2,2">
                                    <ContentControl Content="{TemplateBinding IndependentValue}" />
                                    <StackPanel Orientation="Horizontal">
                                        <ContentControl Content="{TemplateBinding DependentValue}"/>
                                    </StackPanel>
                                </StackPanel>
                            </ToolTipService.ToolTip>
                            <Rectangle StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                        </Grid>
                    </ControlTemplate>

                </Setter.Value>
            </Setter>
        </Style>

效果如图所示

在我的程序中需要添加这样的六个点样式，这样不同的系列就有六种颜色可供选择。

2.1.2 气泡图，散点图由于每个点都应该是圆点，所有又添加了六种圆点的样式：

 <Style x:Key="DataPointEllipseStyle0" TargetType="chartingToolkit:DataPoint">
            <Setter Property="Background" Value="#40699C"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:DataPoint">
                        <Grid x:Name="Root" Opacity="1">
                            <ToolTipService.ToolTip>
                                <StackPanel Margin="2,2,2,2">
                                    <ContentControl Content="{TemplateBinding IndependentValue}" />
                                    <StackPanel Orientation="Horizontal">
                                        <ContentControl Content="{TemplateBinding DependentValue}"/>
                                    </StackPanel>
                                </StackPanel>
                            </ToolTipService.ToolTip>
                            <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                        </Grid>
                    </ControlTemplate>

                </Setter.Value>
            </Setter>
        </Style>

效果如下图所示

2.1.3 饼图通过添加点模板来解决问题

 <ControlTemplate x:Key="pi" TargetType="chartingToolkit:PieDataPoint">
            <Grid x:Name="Root" Opacity="1">
                <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
                                        Storyboard.TargetName=&#