为条形图指定 Y 轴最小值、最大值和网格线

Question

我使用 system.windows.controls.datavisualization.toolkit dll 在 wpf 中创建了条形图控件。我想指定 Y 轴的最小值和最大值。

这是条形图 `

<Grid >
    <barChartToolkit:Chart Height="280" HorizontalAlignment="Stretch" Title="Resource Availability"  Name="columnChart" Background="White"  VerticalAlignment="Stretch"  Width="360">
        <barChartToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Name" ItemsSource="{Binding}"  Title="Resources" />
    </barChartToolkit:Chart>
</Grid>

` 现在我创建了列表并绑定了图表的 DataContext

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        showColumnChart();
    }

    private void showColumnChart()
    {
        List<BarCHartData> valueList = new List<BarCHartData>();
        valueList.Add(new BarCHartData() { Name = "Developer", Value = 10 });
        valueList.Add(new BarCHartData() { Name = "Tester", Value = 20 });
        valueList.Add(new BarCHartData() { Name = "QA", Value = 30 });
        columnChart.DataContext = valueList;
    }

}

public class BarCHartData
{
    public string Name { get; set; }

    public int Value { get; set; }
}

我的条形图如下图所示

我试过下面的代码

<Window x:Class="WpfToolkitChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:barChartToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">

<Grid >
    <barChartToolkit:Chart Height="280" HorizontalAlignment="Stretch" Title="Resource Availability"  Name="columnChart" Background="White"  VerticalAlignment="Stretch"  Width="360">
        <barChartToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Name" ItemsSource="{Binding}"  Title="Resources" />
        <barChartToolkit:Chart.Axes>
            <barChartToolkit:LinearAxis Orientation="Y" Minimum="0" Maximum="100"/>
        </barChartToolkit:Chart.Axes>
    </barChartToolkit:Chart>
</Grid>

但是此代码删除了图形的网格线，如下图所示

如何使用网格线将最大值和最小值设置为 Y 轴？

Answer 1

如果要限制显示值，可以使用转换器和 DependentValueBinding 而不是 DependentValuePath

public class RangeConverter : IValueConverter
{
    public double Min { get; set; }
    public double Max { get; set; }
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var d = System.Convert.ToDouble(value, culture);
        return Math.Max(Min, Math.Min(Max, d));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

转换器资源：

<local:RangeConverter x:Key="rangeConverter" Max="100" Min="0"/>

用法

<DVC:ColumnSeries
    DependentValueBinding="{Binding Value,Converter={StaticResource rangeConverter}}"
    IndependentValuePath="Name"
    ItemsSource="{Binding}"
    Title="Resources"/>

Answer 2

您只需在 LinearAxis 中设置 ShowGridLines="True":

XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp55"
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    x:Class="WpfApp55.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <x:Array x:Key="array1" Type="{x:Type local:BarChartData}">
        <local:BarChartData Name="Developer" Value="25" />
        <local:BarChartData Name="Tester" Value="50" />
        <local:BarChartData Name="QA" Value="75" />
    </x:Array>
</Window.Resources>

<Grid>

    <chartingToolkit:Chart Title="Sample Chart">
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:LinearAxis Minimum="0" 
                                        Maximum="100" 
                                        Orientation="Y"
                                        ShowGridLines="True" />
        </chartingToolkit:Chart.Axes>
        <chartingToolkit:ColumnSeries DependentValuePath="Value" 
                                      IndependentValuePath="Name" 
                                      ItemsSource="{StaticResource array1}"/>
    </chartingToolkit:Chart>

</Grid>

为条形图指定 Y 轴最小值、最大值和网格线

Specify Y-axis minimum, maximum and grid lines for Bar chart

c#

wpf

charts

xaml

wpftoolkit