2017-08-30 138 views
1

我已經使用system.windows.controls.datavisualization.toolkit dll在wpf中創建了條形圖控制。我想指定Y軸的最小值和最大值。爲條形圖指定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; } 
} 

這裏我條形圖繪製如下圖所示的圖像 enter image description here

我試過用下面的代碼

<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> 

但是這個代碼去除圖形的像網格線以下圖像

enter image description here

我怎樣才能設置的最大和最小值,以Y軸與網格線?

+0

您連接的同一個圖像兩次,我不明白是什麼網格線,你在說什麼。以上解決方案 – grek40

回答

0

你只需在您的中設置ShowGridLines="True"即可:

enter image description here

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> 

+0

謝謝@ jstreet..its正常工作 –

0

如果要限制用於顯示的值,你可以使用,而不是和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"/> 
+0

限制條形圖中的值範圍。但是我需要在條形圖中設置Y軸的靜態範圍。 –

相關問題