文章分類／Infragistics
Infragistics XamDataChart 針對 Silverlight 和 WPF，允許您創建系列，其中標記根據綁定項目的屬性看起來不同。
您可以在 MarkerSeries（例如 ScatterSeries 和 RangeColumnSeries）上使用 MarkerTemplate 屬性。您可以創建自定義 DataTemplate，其中 UI 元素的屬性綁定到項目的 DataContext 屬性。
<DataTemplate x:Key="bubbleTemplate" > <Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0.5" MinWidth="10" MinHeight="10" Width="{Binding Item.Width}" Height="{Binding Item.Width}"> <ToolTipService.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" /> </StackPanel> </ToolTipService.ToolTip> </Ellipse> </DataTemplate>
RgbValueConverter 將數值轉換為具有連續調色板的 SolidColorBrush。
您可能希望根據項目的 DataContext 的值更改標記的顏色。值可以有不同的類型。需要 ValueConverter 將指定類型的值轉換為特定顏色的 Brush。
本文介紹兩種類型的轉換器，用於將數字類型轉換為離散調色板和將數字類型轉換為連續調色板。
該示例應用程序以 Silverlight 為目標。XamDataChart for WPF 允許您以相同的方式創建 WPF 應用程序。
創建示例應用程序的要求：
軟件：
創建步驟：
對於Silverlight：
1. 在 Visual Studio 2010 中創建 Silverlight 應用程序。
2. 添加兩個ValueConverter。
NumberToBrush 將數字（雙精度類型）轉換為 SolidColorBrush。畫筆是從單獨的調色板中獲取的顏色。調色板中有 6 個 SolidColorBrush。顏色有白、紅、橙、黃、綠、藍。由於它是一個參數，因此它有一個範圍，轉換器返回一個相對於該數字的 SolidColorBrush。如果值超出範圍，則返回白色 SolidColorBrush。
public sealed class NumberToBrush : IValueConverter { private Brush[] _brushes = new Brush[] { new SolidColorBrush(Colors.White), new SolidColorBrush(Colors.Red), new SolidColorBrush(Colors.Orange), new SolidColorBrush(Colors.Yellow), new SolidColorBrush(Colors.Green), new SolidColorBrush(Colors.Blue)}; #region Property Accessors public Brush[] Brushes { get { return this._brushes; } set { this._brushes = value; } } #endregion #region IValueConverter public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if ((typeof(Brush) != targetType || typeof(double) != value.GetType())) { return null; } Range range = parameter as Range; if(range == null) { range = new Range(); range.Min = 0; range.Max = 10; } var i = (double)value; double interval = (double)(range.Max - range.Min)/(_brushes.Length - 1); int index = (int)(i / interval + 0.5); if (index <= 0 || index >= this._brushes.Length) return this._brushes[0]; return this._brushes[index]; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion } public class Range : BaseViewModel { #region Min private int _min; public int Min { get { return this._min; } set { this._min = value; OnPropertyChanged("Min"); } } #endregion // Min #region Max private int _max; public int Max { get { return this._max; } set { this._max = value; OnPropertyChanged("Max"); } } #endregion // Max }
該轉換器使用 HSV（色相-飽和度-值）。
http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93
請參閱維基百科鏈接以獲取更多信息。
RgbValueConverter 對最小值和最大值內的數字進行標準化。
varnormValue = i * 360/(範圍.Max – 範圍.Min);
RgbValueConverter 的代碼如下。
public sealed class RgbValueConverter : IValueConverter { private static Color ColorFromHsv(double hue, double saturation, double value) { int hi = (int)(Math.Floor(hue / 60)) % 6; double f = hue / 60 - Math.Floor(hue / 60); value = value * 255; int v = (int)(value); int p = (int)(value * (1 - saturation)); int q = (int)(value * (1 - f * saturation)); int t = (int)(value * (1 - (1 - f) * saturation)); if (hi == 0) { return Color.FromArgb(255, (byte)v, (byte)t, (byte)p); } if (hi == 1) { return Color.FromArgb(255, (byte)q, (byte)v, (byte)p); } if (hi == 2) { return Color.FromArgb(255, (byte)p, (byte)v, (byte)t); } if (hi == 3) { return Color.FromArgb(255, (byte)p, (byte)q, (byte)v); } if (hi == 4) { return Color.FromArgb(255, (byte)t, (byte)p, (byte)v); } return Color.FromArgb(255, (byte)v, (byte)p, (byte)q); } #region IValueConverter public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if ((typeof(Brush) != targetType || typeof(double) != value.GetType())) { return null; } Range range = parameter as Range; if(range == null) { range = new Range(); range.Min = 0; range.Max = 10; } var i = System.Convert.ToDouble(value); if (i <= range.Min || range.Min >= range.Max) { return new SolidColorBrush(Colors.White); } var normValue = i * 360/(range.Max - range.Min); return new SolidColorBrush(ColorFromHsv(normValue, 1, 1)); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion }
3. 創建要在 XamDataChart 的 DataContext 中使用的示例數據。
public class BubbleDataCollection : ObservableCollection { public BubbleDataCollection() { this.Add(new BubblePoint { XValue = 4, YValue = 10, Width = 30 }); this.Add(new BubblePoint { XValue = 4, YValue = 4, Width = 40 }); this.Add(new BubblePoint { XValue = 8, YValue = 8, Width = 20 }); this.Add(new BubblePoint { XValue = 10, YValue = 1, Width = 50 }); this.Add(new BubblePoint { XValue = 1, YValue = 10, Width = 40 }); } } public class BubblePoint { public double XValue { get; set; } public double YValue { get; set; } public double Width { get; set; } }
<UserControl.Resources> ... <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" /> .... <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource bubbleCollection}">
4. 創建一個代表圓的MarkerTemplate。顏色綁定到 YValue 屬性。我們將在這裡使用兩個轉換器。
<UserControl.Resources> <Converters:NumberToBrush x:Key="indexToBrush"/> <Converters:RgbValueConverter x:Key="RgbToBrush"/> <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" /> <Converters:Range x:Key="range" Min="0" Max="10"/> <DataTemplate x:Key="bubbleTemplate" > <Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{Binding Item.YValue, Converter={StaticResource indexToBrush}, ConverterParameter={StaticResource range}}" Stroke="{Binding Series.ActualMarkerOutline}" StrokeThickness="0.5" MinWidth="10" MinHeight="10" Width="{Binding Item.Width}" Height="{Binding Item.Width}"> <ToolTipService.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" /> </StackPanel> </ToolTipService.ToolTip> </Ellipse> </DataTemplate> <DataTemplate x:Key="bubbleTemplate2" > <Ellipse Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{Binding Item.YValue, Converter={StaticResource RgbToBrush}, ConverterParameter={StaticResource range}}" Stroke="{Binding Series.ActualMarkerOutline}" StrokeThickness="0.5" MinWidth="10" MinHeight="10" Width="{Binding Item.Width}" Height="{Binding Item.Width}"> <ToolTipService.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" /> </StackPanel> </ToolTipService.ToolTip> </Ellipse> </DataTemplate> </UserControl.Resources>
MarkerTemplate 定義包含一個橢圓，該橢圓由基於 BubblePoint 對象的 YValue 的 Brush 填充。
5. 使用您創建的 MarkerTemplate 定義創建散點圖系列 XamDataChart。
<igChart:XamDataChart x:Name="theChart"> <igChart:XamDataChart.Axes> <igChart:NumericXAxis x:Name="xAxis" MinimumValue="0" MaximumValue="15"/> <igChart:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="15"/> </igChart:XamDataChart.Axes> <igChart:XamDataChart.Series> <igChart:ScatterSeries x:Name="scatter" MarkerTemplate="{StaticResource bubbleTemplate}" ItemsSource="{Binding}" XMemberPath="XValue" YMemberPath="YValue" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}"></igChart:ScatterSeries> </igChart:XamDataChart.Series> </igChart:XamDataChart> ... <igChart:XamDataChart x:Name="theChart2"> <igChart:XamDataChart.Axes> <igChart:NumericXAxis x:Name="xAxis2" MinimumValue="0" MaximumValue="15"/> <igChart:NumericYAxis x:Name="yAxis2" MinimumValue="0" MaximumValue="15"/> </igChart:XamDataChart.Axes> <igChart:XamDataChart.Series> <igChart:ScatterSeries x:Name="scatter2" MarkerTemplate="{StaticResource bubbleTemplate2}" ItemsSource="{Binding}" XMemberPath="XValue" YMemberPath="YValue" XAxis="{Binding ElementName=xAxis2}" YAxis="{Binding ElementName=yAxis2}"></igChart:ScatterSeries> </igChart:XamDataChart.Series> </igChart:XamDataChart>
6. 運行應用程序。