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

在C1Chart for WPF初级教程-初遇。Getting Started（下）章节，我们介绍了更改数据点的颜色以及样式。

但是很多时候，我们需要更多自定义化的设置。在C1Chart for wpf里，可以使用DataSeries.PlotElementLoaded事件去重写图表元素的默认样式和行为。但plot元素载入的时候就会触发PlotElementLoaded事件。

本文就来介绍如何自定义数据点DataPoint的颜色和大小。

PlotElement代表图表上数据点的直观表示。它主要依靠图表类型。对于柱状图，元素是columns；对于饼图，元素是pie silices等。

每个PlotElement都有一个DataPoint属性表示这个元素数据点的信息。

下面就来详细介绍不同的自定义plot elements的方式。

默认样式

我们从一个简单的有符号的图表开始。如下的代码片段解释了如何简单的创建基本图表。

void DefaultAppearance()
  {
    chart.Data.Children.Add(CreateDataSeries(50));
  }
  XYDataSeries CreateDataSeries(int npts)
  {
    double[] x = new double[npts];
    double[] y = new double[npts];
    for (int i = 0; i < npts; i  )
    {
      x = 0.5*i; y = Math.Sin(x);
    }
    return new XYDataSeries() { XValuesSource = x, ValuesSource = y };
  }

图表如下所示：

自定义颜色

下面我们接着介绍根据值来对数据点的颜色进行渲染。

为了实现这个，我们在PlotElementLoaded事件里分配自定义的颜色刷到PlotElement.Fill属性。

代码如下：

void CustomDataPointColor()
{
  var ds = CreateDataSeries(50);
  ds.PlotElementLoaded  = (sender, args) =>
  {
    var pe = (PlotElement)sender;
    var dp = pe.DataPoint;
    if (!(pe is Lines)) // skip connecting lines
    {
      // fill the symbol with a color calculated from the data value
      pe.Fill = GetBrush(Colors.Blue, Colors.White, Colors.Red, dp.Value);
    }
  }
  chart.Data.Children.Add(ds);
}

图表如下所示：

上述代码中的GetBrush方法用来创建一个混合笔刷。

当然你也可以根据自己的需求采用其他方法设置点的颜色，这只是一个演示。

例如你可以高亮特定区域的店。

本文的示例如下所示：

CustomColor_C1ChartWPF.zip (318.46 kb)

自定义大小

其他普遍的自定义是给符号设置不同的大小。通过每一个plot元素的scale transformation应用，就可以完成此功能。

以下的代码更改了点的大小，通过不同的值。注意transform的圆点依然保持在同一地方的中心位置。

void CustomDataPointSize()
{
  var ds = CreateDataSeries(50);
  ds.PlotElementLoaded  = (s, e) =>
  {
    var pe = (PlotElement)s;
    var dp = pe.DataPoint;
    if (!(pe is Lines)) // skip connecting lines
    {
      // apply simple scale transformation depending on data point value
      double scale = 1   0.4 * dp.Value;
      pe.RenderTransform = new ScaleTransform() { ScaleX = scale, ScaleY = scale };
      pe.RenderTransformOrigin = new Point(0.5, 0.5);
    }
  };
  chart.Data.Children.Add(ds);
}

结果如下所示：