← 返回所有博客文章

符号。数据点的自定义

在上一篇C1Chart for WPF初级教程-颜色和大小。数据点的自定义(一)中,我们介绍如何自定义数据点的颜色和大小,

本章,我们就接着这个话题进行讨论,如何对数据点的形状来进行自定义。

自定义符号

现在我们就来介绍如何在默认的符号样式展示自定义的图像,图表的类型是LineSymbols图表。</>

 在DataSeries中使用自定义图像

我们需要使用自定义图像来替换默认的书店的符号样式,我首先需要创建custom style。

代码如下:

<Window.Resources>
    <Style x:Key="happy" TargetType="{x:Type c1:PlotElement}">
        <Setter Property="Stroke" Value="Transparent"/>
        <Setter Property="Fill">
            <Setter.Value>
                <ImageBrush>
                    <ImageBrush.ImageSource>
                        <BitmapImage UriSource="pack://application:,,,/Images/happy.jpg"/>
                    </ImageBrush.ImageSource>
                </ImageBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

现在,我们设置这个样式给一个特定的DataSeries,通过XAML或代码实现。

通过XAML:

<c1:DataSeries Label="Growth" SymbolStyle="{StaticResource happy}" SymbolMarker="Box"  SymbolSize="30,30" RenderMode="Default" Values="20 45 19 24 25 5 15 30 12 40" />

通过代码:

使用PlotElementLoaded事件来实现XAML相同的功能。

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)
{
    PlotElement pe = (PlotElement)sender;

    if (!(pe is Lines)) // skip lines
    {
        DataPoint dp = pe.DataPoint;
        pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/happy.jpg")));
    }
}

 对DataSeries使用不同的自定义图像

许多时候,我们希望对于一个序列series基于某种条件展示不同的符号样式。举例来说,假设有一系列的值,我们想要基于不同值展示不同的符号样式。当值大于20和小于20的时候,符号是不一样的。

为了实现这个需求,我们在XAML创建style,并且在PlotElementLoaded事件里进行处理。

如下所示:

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)
{
    PlotElement pe = (PlotElement)sender;

    if (!(pe is Lines)) // skip lines
    {
        DataPoint dp = pe.DataPoint;
        pe.Stroke = Brushes.Transparent;
        if (dp.Value <= 20)
        {
            pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/sad.jpg")));
        }
        else if (dp.Value > 20)
        {
            pe.Fill = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Images/happy.jpg")));
        }
    }
}

 

最终结果如下所示:

 

本文的示例请参考如下。

C#示例代码:Wpf_Chart_CustomSymbol_CS.zip (32.75 kb)

VB示例代码: Wpf_Chart_CustomSymbols_VB.zip (35.60 kb)

 

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

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动画(四)