<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新版發布，慧都助力——解決方案大放送！優惠詳情點擊查看>>