指定條形圖的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

您只需要在ShowGridLines="True"中設置ShowGridLines="True" LinearAxis ：

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>