Wpf 中带标签的列系列图表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19959909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 10:03:08  来源:igfitidea点击:

Labeled Column Series Chart in Wpf

c#wpfchartsdata-visualizationmschart

提问by Redone

I am using System.Windows.Controls.DataVisualization.Toolkit.dllto generate charts for my C# based wpf app. Here is my xaml for the chart.

我正在System.Windows.Controls.DataVisualization.Toolkit.dll为我的基于 C# 的 wpf 应用程序生成图表。这是我的图表 xaml。

<chartingToolkit:Chart  Name="chartDailySales"   
  Title="Monthly Sales" 
  VerticalAlignment="Top" Margin="10,10,0,0" 
  Height="262" 
  BorderBrush="#00000000" 
  DataContext="{Binding}" 
  IsTabStop="True"
  Background="#ffbcd5c7">

       <!-- Plot area-->
       <chartingToolkit:Chart.PlotAreaStyle>
           <Style TargetType="Grid">
               <Setter Property="Background" Value="White" />
           </Style>
       </chartingToolkit:Chart.PlotAreaStyle>



           <!-- Hide Legend-->
       <chartingToolkit:Chart.LegendStyle>
           <Style TargetType="Control">
               <Setter Property="Width" Value="0"/>
               <Setter Property="Height" Value="0"/>
           </Style>
       </chartingToolkit:Chart.LegendStyle>



       <chartingToolkit:ColumnSeries DependentValuePath="Value" 
        IndependentValuePath="Key" 
        ItemsSource="{Binding}" 
        IsSelectionEnabled="False"
        >


           <chartingToolkit:ColumnSeries.DataPointStyle>
               <Style TargetType="chartingToolkit:ColumnDataPoint">
                   <Setter Property="Background" Value="#ff217346"/>
                   <Setter Property="BorderBrush" Value="#ff217346" />
                   <Setter Property="BorderThickness" Value="1" />

               </Style>

           </chartingToolkit:ColumnSeries.DataPointStyle>

       </chartingToolkit:ColumnSeries>
   </chartingToolkit:Chart>

And Here is the code to fill the data.

这是填充数据的代码。

List<KeyValuePair<string, double>> monthlySalesList = new List<KeyValuePair<string, double>>();
        monthlySalesList.Add(new KeyValuePair<string, double>("JAN", 1234 ));
        monthlySalesList.Add(new KeyValuePair<string, double>("FEB", 2204));
        monthlySalesList.Add(new KeyValuePair<string, double>("MAR", 3234));
        monthlySalesList.Add(new KeyValuePair<string, double>("APR", 3234));
        monthlySalesList.Add(new KeyValuePair<string, double>("MAY", 5234));
        monthlySalesList.Add(new KeyValuePair<string, double>("JUN", 6234));
        monthlySalesList.Add(new KeyValuePair<string, double>("JUL", 8234));
        monthlySalesList.Add(new KeyValuePair<string, double>("AUG", 6234));
        monthlySalesList.Add(new KeyValuePair<string, double>("SEP", 7234));
        monthlySalesList.Add(new KeyValuePair<string, double>("OCT", 9234));
        monthlySalesList.Add(new KeyValuePair<string, double>("NOV", 11234));
        monthlySalesList.Add(new KeyValuePair<string, double>("DEC", 10234));

        chartDailySales.DataContext = monthlySalesList;

And Here's the output. enter image description here

这是输出。 在此处输入图片说明

Now how do I label the chart as follows. enter image description here

现在我如何标记图表如下。 在此处输入图片说明

Thanks.

谢谢。

回答by atomaras

Why don't you change the Template of the ColumnDataPoint inside the DataPointStyle similar to here

你为什么不改变类似于这里的DataPointStyle里面的ColumnDataPoint的Template

回答by parth

             <charting:ColumnSeries Height="350" Foreground="Black"
                    ItemsSource="{Binding Path=MyCurrentResultsView.ResultsView}"
                    IndependentValueBinding="{Binding Key}"
                    DependentValueBinding="{Binding Value}">
<charting:ColumnSeries.DataPointStyle>
    <Style TargetType="charting:ColumnDataPoint">
        <Setter Property="Template">
            <Setter.Value>
             <ControlTemplate TargetType="charting:ColumnDataPoint">
             <Grid>
                <Rectangle Fill="{TemplateBinding Background}" Stroke="Black"/>
                <Grid Margin="0 -20 0 0" HorizontalAlignment="Center" VerticalAlignment="Top">
                    <TextBlock Text="{TemplateBinding FormattedDependentValue}" Margin="2"/>
                </Grid>
             </Grid>
             </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</charting:ColumnSeries.DataPointStyle> 

回答by ahazzah

How about something like this:

这样的事情怎么样:

<Window 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:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <Style x:Key="ColumnDataPointStyle1"
               TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
            <Setter Property="Background"
                    Value="#ff217346" />
            <Setter Property="BorderBrush"
                    Value="#ff217346" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type chartingToolkit:ColumnDataPoint}">
                        <Grid>
                            <Rectangle Fill="{TemplateBinding Background}"
                                       Stroke="Black" />
                            <TextBlock Text="{TemplateBinding FormattedDependentValue}" Foreground="Black" Margin="0,-14,0,0" FontSize="8" FontWeight="Bold" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>

        <chartingToolkit:Chart  Name="chartDailySales"
                                Title="Monthly Sales"
                                VerticalAlignment="Top"
                                Margin="10,10,0,0"
                                Height="262"
                                BorderBrush="#00000000"
                                DataContext="{Binding}"
                                IsTabStop="True"
                                Background="#ffbcd5c7">

            <!-- Plot area-->
            <chartingToolkit:Chart.PlotAreaStyle>
                <Style TargetType="Grid">
                    <Setter Property="Background"
                            Value="White" />
                </Style>
            </chartingToolkit:Chart.PlotAreaStyle>

            <!-- Hide Legend-->
            <chartingToolkit:Chart.LegendStyle>
                <Style TargetType="Control">
                    <Setter Property="Width"
                            Value="0" />
                    <Setter Property="Height"
                            Value="0" />
                </Style>
            </chartingToolkit:Chart.LegendStyle>

            <chartingToolkit:ColumnSeries DependentValuePath="Value"
                                          IndependentValuePath="Key"
                                          ItemsSource="{Binding}"
                                          IsSelectionEnabled="False"
                                          DataPointStyle="{DynamicResource ColumnDataPointStyle1}" />
        </chartingToolkit:Chart>

    </Grid>
</Window>