永利最大(官方)网站

<ComponentOne Studio for WPF下载>

本文介绍如何当鼠标Hover到数据上时，提示一个标签，并且在标签上显示相关的数据。对于展示绑定的和交互的标记和标签，C1Chart有特殊的支持。而且这种方式不是唯一的。本文讨论的是使用ChartPanelObject 和ChartView.Layers集合来给图表设置标记和标签。

第一步

我们要在WPF工程里添加一个C1Chart。

第二步

在C1Chart里添加“c1chart:ChartView”标记，然后添加ChartView.Layers集合。在这里就可以添加任何数量的ChartPanels。每一个面板都可以由一定数量的ChartPanelObjects组成，这是基本的UI元素可以用来定义我们的标记。

XAML代码参考：

<c1chart:C1Chart x:Name="chart"> <c1chart:C1Chart.View> <c1chart:ChartView> < c1chart:ChartView.Layers> < c1chart:ChartPanel > <!-- ChartPanelObjects --> < /c1chart:ChartPanel> < /c1chart:ChartView.Layers> </c1chart:ChartView> </c1chart:C1Chart.View>

</c1chart:C1Chart>

第三步

设置ChartPanelObject。清注意它有一些主要的属性如下：

• Attach -设置对象是否是依附到数据点。你可以将它依附到X，Y，XY都有或者都没有。本示例是依附到DataX。
•  Action- 设置交互的行为，比如鼠标移动，鼠标拖拽或没有。本章中的示例是鼠标移动 MouseMove。
• DataPoint-设置初始化的数据点，或是创建一个静态的标记。本示例中的初始化数据是 -1,-1。

XAML代码参考：

<!-- simple bound marker -->

<c1:ChartPanelObject x:Name="obj" Attach="DataX" Action="MouseMove" DataPoint="-1,-1" HorizontalAlignment="Center" VerticalAlignment="Top" Width="60" Height="50"> <c1:ChartPanelObject.RenderTransform> <TranslateTransform Y="-50"/> </c1:ChartPanelObject.RenderTransform> <Grid DataContext="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Parent}" Opacity="0.8"> <Path Data="M0.5,0.5 L23,0.5 23,23 11.61165,29.286408 0.5,23 z" Stretch="Fill" Fill="#FFF1F1F1" Stroke="DarkGray" StrokeThickness="1"/> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock Text="Value" Margin="2 0"/> <TextBlock x:Name="label" Text="{Binding DataPoint.Y, StringFormat=c2}" FontWeight="Bold" Margin="2"/> </StackPanel> </Grid>

</c1:ChartPanelObject>

根据如上代码所示，我们还设置了如下属性：

• HorizontalAlignment = Center
• VerticalAlignment = Top

Alignment属性设置了标记的方向。而通过设置ChartPanelObject.Content属性到任何的UIElement。我们就可以定义展示数据点的标记的样式。这个示例中我们创建了一个Grid，画了一个五边形的标记，并在标记里展示数据。

第四步

添加轴标题。通过如下的XAML代码就可以添加一个在中心位置的轴标题“Simple Bound Markers”。颜色和字体都可以设置。

<c1:ChartView.AxisX>
<c1:Axis>
<c1:Axis.Title>
<TextBlock Text="Simple Bound Markers" TextAlignment="Center" Foreground="Pink" FontSize="20" FontWeight="Bold"/>
</c1:Axis.Title>
</c1:Axis>
</c1:ChartView.AxisX>

通过以上代码，运行效果如下所示：

当鼠标在图表中移动时，就会显示相应的柱的Y轴数据。

本文的详细代码请参考示例：

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自

葡萄城经典UI产品惠风迎春，惊喜折扣礼品送不停！优惠详情点击查看>>

强大工具Qt新版发布，慧都助力——解决方案大放送！优惠详情点击查看>>