为wpf工具箱图表工艺中的图例项目附近的矩形分配颜色 [英] Assigning color to the rectangle near legend items in wpf toolkit charting lineseries

问题描述

我如下动态添加图表到图表中。

  foreach（KeyValuePair< string，List< KeyValuePair< DateTime，double> ;> yieldSeries中的tempSeries）{LineSeries lineSeries = new LineSeries（）; lineSeries.DependentValuePath =Value; lineSeries.IndependentValuePath =Key; lineSeries.ItemsSource = tempSeries.Value; lineSeries.Title = tempSeries.Key; lineSeries.SetResourceReference（FrameworkElement.StyleProperty，CommonLineSeries）; lineSeries.Tag = Brushes.Red; lineSeries.Background = Brushes.Red; yieldTrendChart.Series.Add（lineSeries）;}  

为特定的顺序分配特定的颜色以实现这些我已经为折线添加了如下样式：

 < Style x：Key = CommonLineSeriesTargetType =charting：LineSeriesBasedOn ={StaticResource {x：Type charting：LineSeries}}> < Setter Property =Template> < Setter.Value> < ControlTemplate TargetType =charting：LineSeries> < Canvas x：Name =PlotArea> < Polyline Points ={TemplateBinding Points}Stroke ={Binding Tag，RelativeSource = {RelativeSource AncestorType = {x：Type charting：LineSeries}}}Style ={TemplateBinding PolylineStyle}/> < / Canvas> < / ControlTemplate> < /Setter.Value> < / Setter> < / Style>  

颜色已成功分配给图形中的线，但图例附近的矩形仍显示由.net随机分配的颜色。
如何分配

解决方案

您需要编辑LegendItem样式

 <$> 
 c $ c> Window x：Class =WpfApplication8.Window1
 xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns：x =http： //schemas.microsoft.com/winfx/2006/xaml
 xmlns：chartingToolkit =clr-namespace：System.Windows.Controls.DataVisualization.Charting; assembly = System.Windows.Controls.DataVisualization.Toolkit
 xmlns：visualizationToolkit =clr-namespace：System.Windows.Controls.DataVisualization; assembly = System.Windows.Controls.DataVisualization.Toolkit
 xmlns：datavis =clr-namespace：System.Windows.Controls .DataVisualization; assembly = System.Windows.Controls.DataVisualization.Toolkit
 Title =Window1Height =500Width =700> 
< Window.Resources> 
< Style x：Key =LineSeriesStyle1TargetType ={x：Type chartingToolkit：LineSeries}> 
< Setter Property =IsTabStopValue =False/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type chartingToolkit：LineSeries}> 
< Canvas x：Name =PlotArea> 
< Polyline Points ={TemplateBinding Points}Stroke ={Binding Tag，RelativeSource = {RelativeSource AncestorType = {x：Type chartingToolkit：LineSeries}}}/> 
< / Canvas> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< /Window.Resources> 
< Grid> 
< chartingToolkit：图x：Name =mcChart> 
< chartingToolkit：LineSeries Tag =Greenx：Name =chartDependentValuePath =ValueIsSelectionEnabled =TrueIndependentValuePath =KeyItemsSource ={Binding}Style ={StaticResource LineSeriesStyle1} > 
< chartingToolkit：LineSeries.LegendItemStyle> 
< Style TargetType =chartingToolkit：LegendItem> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type chartingToolkit：LegendItem}> 
< Border BorderBrush =BlackBorderThickness =0> 
< StackPanel> 
< StackPanel Orientation =Horizo​​ntal> 
< Rectangle Width =12Height =12Fill ={Binding ElementName = chart，Path = Tag}StrokeThickness =1/> 
< datavis：Title Content ={TemplateBinding Content}Foreground ={Binding ElementName = chart，Path = Tag}FontSize =18Margin =10/> 
< / StackPanel> 
< / StackPanel> 
< / Border> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / chartingToolkit：LineSeries.LegendItemStyle> 
< / chartingToolkit：LineSeries> 
< / chartingToolkit：Chart> 
< / Grid> 
  

c＃ strong>

 命名空间WpfApplication8 
  

{

  public partial class Window1：Window 
 {
 public Window1 ）
 {
 InitializeComponent（）; 
 LoadColumnChartData（）; 
} 
 
 private void LoadColumnChartData（）
 {
（LineSeries）mcChart.Series [0]）。ItemsSource = 
 new KeyValuePair& int> [] {
 new KeyValuePair< string，int>（Project Manager，13），
 new KeyValuePair< string，int>（CEO，23） 
 
} 
} 
  

}

结果

更新

  Window.Resources> 
< Style x：Key =LineSeriesStyle1TargetType ={x：Type chartingToolkit：LineSeries}> 
< Setter Property =TagValue ={Binding Tag，RelativeSource = {RelativeSource AncestorType = {x：Type chartingToolkit：LineSeries}}}>< / Setter> 
< Setter Property =OverridesDefaultStyleValue =True>< / Setter> 
< Setter Property =IsTabStopValue =False/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type chartingToolkit：LineSeries}> 
< Canvas x：Name =PlotArea> 
< Polyline x：Name =polylinePoints ={TemplateBinding Points}Stroke ={Binding Tag，RelativeSource = {RelativeSource TemplatedParent}} 
< / Canvas> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
 
 
< /Window.Resources> 
< Grid> 
< chartingToolkit：Chart Name =lineChart> 
< chartingToolkit：LineSeries Name =chart1Tag =BlueBackground =GreenStyle ={StaticResource LineSeriesStyle1}Title =KW GastatsDependentValuePath =ValueIndependentValuePath =KeyItemsSource = {Binding [0]}IsSelectionEnabled =True> 
< chartingToolkit：LineSeries.LegendItemStyle> 
< Style TargetType ={x：Type chartingToolkit：LegendItem}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type chartingToolkit：LegendItem}> 
< Border> 
< StackPanel> 
< StackPanel Orientation =Horizo​​ntal> 
< Rectangle Width =12Height =12Fill ={Binding ElementName = chart1，Path = Tag}Stroke ={Binding Background}StrokeThickness =1/> 
< datavis：Title Content ={TemplateBinding Content}Foreground ={Binding ElementName = chart1，Path = Tag}FontSize =18Margin =10/> 
< / StackPanel> 
< / StackPanel> 
< / Border> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / chartingToolkit：LineSeries.LegendItemStyle> 
< / chartingToolkit：LineSeries> 
< chartingToolkit：LineSeries Name =chart2Tag =GreenStyle ={StaticResource LineSeriesStyle1}Title =Preu KWDependentValuePath =ValueIndependentValuePath =KeyItemsSource ={Binding [1 ]}IsSelectionEnabled =True> 
< chartingToolkit：LineSeries.LegendItemStyle> 
< Style TargetType ={x：Type chartingToolkit：LegendItem}> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType ={x：Type chartingToolkit：LegendItem}> 
< Border> 
< StackPanel> 
< StackPanel Orientation =Horizo​​ntal> 
< Rectangle Width =12Height =12Fill ={Binding ElementName = chart2，Path = Tag}StrokeThickness =1/> 
< datavis：Title Content ={TemplateBinding Content}Foreground ={Binding ElementName = chart2，Path = Tag}FontSize =18Margin =10/> 
< / StackPanel> 
< / StackPanel> 
< / Border> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< / chartingToolkit：LineSeries.LegendItemStyle> 
< / chartingToolkit：LineSeries> 
< / chartingToolkit：图表> 
< / Grid> 
  

c＃代码

  InitializeComponent（）; 
 
 List< KeyValuePair< DateTime，int>> llistaGastats = new List< KeyValuePair< DateTime，int>>（）; 
 llistaGastats.Add（new KeyValuePair< DateTime，int>（DateTime.Now，100））; 
 llistaGastats.Add（new KeyValuePair< DateTime，int>（DateTime.Now.AddMonths（1），200））; 
 List< KeyValuePair< DateTime，int>> llistaPreu = new List< KeyValuePair< DateTime，int>>（）; 
 llistaPreu.Add（new KeyValuePair< DateTime，int>（DateTime.Now，300））; 
 llistaPreu.Add（new KeyValuePair< DateTime，int>（DateTime.Now.AddMonths（1），300））; 
 var dataSourceList = new List< List< KeyValuePair< DateTime，int>>>（）; 
 dataSourceList.Add（llistaGastats）; 
 dataSourceList.Add（llistaPreu）; 
 lineChart.DataContext = dataSourceList; 
  

结果

>

I am adding lineseries to a chart dynamically as follows.

foreach (KeyValuePair<string, List<KeyValuePair<DateTime, double>>> tempSeries in yieldSeries)
{
	LineSeries lineSeries = new LineSeries();
	lineSeries.DependentValuePath = "Value";
	lineSeries.IndependentValuePath = "Key";
	lineSeries.ItemsSource = tempSeries.Value;
	lineSeries.Title = tempSeries.Key;
	lineSeries.SetResourceReference(FrameworkElement.StyleProperty,"CommonLineSeries");
	lineSeries.Tag = Brushes.Red;
	
	lineSeries.Background = Brushes.Red;
	
	yieldTrendChart.Series.Add(lineSeries);
}

I wish to assign specific color in specific order for the lineseries to attain this I have added a style for the polyline as follows

<Style x:Key="CommonLineSeries" TargetType="charting:LineSeries" BasedOn="{StaticResource {x:Type charting:LineSeries}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:LineSeries">
                <Canvas x:Name="PlotArea">
                    <Polyline Points="{TemplateBinding Points}" Stroke="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type charting:LineSeries}}}" Style="{TemplateBinding PolylineStyle}"/>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>        
</Style>

Problem The color is successfully assigned to the lines in the graph however the rectangle near the legend still shows the color assigned by .net randomly. How shall I assign the same color to the rectangle as I have assigned it to the line??

解决方案

You need to edit LegendItem Style to change color of legend rectangle.

xaml

Window x:Class="WpfApplication8.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:datavis ="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="Window1" Height="500" Width="700">
<Window.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">
                        <Polyline Points="{TemplateBinding Points}" Stroke="{Binding Tag,RelativeSource={RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <chartingToolkit:Chart x:Name="mcChart"  >
        <chartingToolkit:LineSeries Tag="Green" x:Name="chart" DependentValuePath="Value"  IsSelectionEnabled="True" IndependentValuePath="Key" ItemsSource="{Binding}" Style="{StaticResource LineSeriesStyle1}">
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="chartingToolkit:LegendItem" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border BorderBrush="Black" BorderThickness="0">
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart,Path=Tag}" StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
</Grid>

c#

namespace WpfApplication8

{

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        LoadColumnChartData();
    }

    private void LoadColumnChartData()
    {
        ((LineSeries)mcChart.Series[0]).ItemsSource =
        new KeyValuePair<string, int>[]{
        new KeyValuePair<string,int>("Project Manager", 13),
        new KeyValuePair<string,int>("CEO", 23),};

    }
}

}

Result

Update

 <Window.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="{x:Type chartingToolkit:LineSeries}">
        <Setter Property="Tag" Value="{Binding Tag,RelativeSource={RelativeSource AncestorType={x:Type chartingToolkit:LineSeries}}}"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type chartingToolkit:LineSeries}">
                    <Canvas x:Name="PlotArea">
                        <Polyline x:Name="polyline"  Points="{TemplateBinding Points}" Stroke="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Window.Resources>
<Grid>
    <chartingToolkit:Chart Name="lineChart">
        <chartingToolkit:LineSeries Name="chart1" Tag="Blue" Background="Green"  Style="{StaticResource LineSeriesStyle1}" Title="KW Gastats"  DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}" IsSelectionEnabled="True">
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="{x:Type chartingToolkit:LegendItem}" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border >
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart1,Path=Tag}"  Stroke="{Binding Background}" StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart1,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
        <chartingToolkit:LineSeries Name="chart2" Tag="Green"   Style="{StaticResource LineSeriesStyle1}" Title="Preu KW"   DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}" IsSelectionEnabled="True" >
            <chartingToolkit:LineSeries.LegendItemStyle>
                <Style TargetType="{x:Type chartingToolkit:LegendItem}" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
                                <Border >
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" >
                                            <Rectangle Width="12" Height="12" Fill="{Binding ElementName=chart2,Path=Tag}"   StrokeThickness="1"  />
                                            <datavis:Title Content="{TemplateBinding Content}" Foreground="{Binding ElementName=chart2,Path=Tag}" FontSize="18" Margin="10"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </chartingToolkit:LineSeries.LegendItemStyle>
        </chartingToolkit:LineSeries>
    </chartingToolkit:Chart>
</Grid>

c# Code

InitializeComponent();

        List<KeyValuePair<DateTime, int>> llistaGastats = new List<KeyValuePair<DateTime, int>>();
        llistaGastats.Add(new KeyValuePair<DateTime, int>(DateTime.Now, 100));
        llistaGastats.Add(new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 200));
        List<KeyValuePair<DateTime, int>> llistaPreu = new List<KeyValuePair<DateTime, int>>();
        llistaPreu.Add(new KeyValuePair<DateTime, int>(DateTime.Now, 300));
        llistaPreu.Add(new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 300));
        var dataSourceList = new List<List<KeyValuePair<DateTime, int>>>();
        dataSourceList.Add(llistaGastats);
        dataSourceList.Add(llistaPreu);
        lineChart.DataContext = dataSourceList;

Result

这篇关于为wpf工具箱图表工艺中的图例项目附近的矩形分配颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！