← 返回所有博客文章

标记和标签。撕名牌大战(一):简单绑定标记

这是GCDN里最常见的问题,我见到示例里有添加标记和标签,可是是如何实现的呢?

下面我们就撕下C1Chart大美女身上的这个标签,从数据开始,教你如何简单的添加一个绑定的标签。

本文介绍如何当鼠标Hover到数据上时,提示一个标签,并且在标签上显示相关的数据。

对于展示绑定的和交互的标记和标签,C1Chart有特殊的支持。而且这种方式不是唯一的。本文讨论的是使用ChartPanelObject 和ChartView.Layers集合来给图表设置标记和标签。

 

第一步

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

 

第二步

在C1Chart里添加<c1chart:ChartView></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>

 

具体有关标题如何设置可以参考我们的中文博客:C1Chart for WPF标题居中以及坐标轴单位标签

也可以通过本系列文章中的初遇。Getting Started(下)里轴部分有详细介绍。

通过以上代码,运行效果如下所示:

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

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

ChartWPF_SimpleMarkXaml.zip (318.62 kb)

 

C1Chart的在线英文产品文档地址:

http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm

如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html

 

C1Chart for WPF初级教程》系列文章

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)