如何根据用户输入使用现代UI图表生成图表 [英] How generate Graphs using modern UI Charts according to user inputs

问题描述

我正在开发一个根据用户输入生成图形图表的程序。应根据用户给出的输入从数据库检索这些图的数据。我使用现代UI图表库来生成图表。您可以在这里找到图书馆 http://modernuicharts.codeplex.com/

这是我的mainWindow.xaml的屏幕截图：
http://imgur.com/eQUBl9w

在这里，用户选择他想要的图表类型和模式，并且应该根据数据库中可用的数据生成所需的图表。目前我已经遵循上述链接的现代ui图表教程，并能够生成图表只有一个LINQ查询，而不是基于用户输入。如何在运行时获取用户输入，并在运行时执行不同的查询并绑定数据。

这里是我的mainWindo.xaml.cs

  public partial MainWindow：UserControl 
 {
 public MainWindow（）
 {
 InitializeComponent ; 
 DataContext = new ChartController（）; 
} 
} 
  

ChartController.CS

  public class ChartController：INotifyPropertyChanged 
 {
 public ObservableCollection< string> ChartTypes {get;组; } 
 
 public ChartController（）
 {
 ChartTypes = new ObservableCollection< string>（）; 
 ChartTypes.Add（Pie）; 
 ChartTypes.Add（Donut）; 
 ChartTypes.Add（Clustered Bar）; 
 ChartTypes.Add（Clustered Column）; 
 ChartTypes.Add（Stacked Bar）; 
 ChartTypes.Add（Stacked Column）; 
 ChartTypes.Add（Stacked Bar Percentage）; 
 ChartTypes.Add（Stacked Column Percentage）; 
} 
 
私有字符串_simpleStringProperty; 
 public string SimpleStringProperty 
 {
 get {return _simpleStringProperty; } 
 set 
 {
 _simpleStringProperty = value; 
 if（value.Equals（Pie））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\\PieChart.xaml ，UriKind.Relative）; 
} 
 if（value.Equals（Donut））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\\\ \\ DoughnutChart.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Clustered Column））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\ \ClusteredColumnChart.xaml，UriKind.Ralative）; 
} 
 if（value.Equals（Clustered Bar））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\ \ClusteredBarChart.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Stacked Bar））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\ \StackedBarChart.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Stacked Column））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\ \StackedColumnChart.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Stacked Bar Percentage））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\\ \\\StackedBarChart100Percent.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Stacked Column Percentage））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\\ \\\StackedColumnChart100Percent.xaml，UriKind.Relative）; 
} 
 if（value.Equals（Radial Gauge））
 {
 SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\ \RadialGaugeChart.xaml，UriKind.Relative）; 
} 
 OnPropertyChanged（SimpleStringProperty）; 
 
} 
} 
 
 private Uri _selectedPageChart; 
 public Uri SelectedPageChart 
 {
 get {return _selectedPageChart; } 
 set 
 {
 _selectedPageChart = value; 
 OnPropertyChanged（SelectedPageChart）; 
} 
} 
 protected void OnPropertyChanged（string name）
 {
 PropertyChangedEventHandler handler = PropertyChanged; 
 if（handler！= null）
 {
 handler（this，new PropertyChangedEventArgs（name））; 
} 
} 
 
公共事件PropertyChangedEventHandler PropertyChanged; 
} 
  

}

PieChart.xaml

 < Grid> 
 
< metroChart：PieChart 
 Style ={StaticResource MinimalChartStyle}
 ChartTitle =Minimal Pie Chart
 SelectedItem ={Binding Path = SelectedItem，Mode = TwoWay}> 
< metroChart：PieChart.Series> 
< metroChart：ChartSeries 
 SeriesTitle =Errors
 DisplayMember =Year
 ValueMember =Cost
 ItemsSource ={Binding Path = Errors} /> 
< / metroChart：PieChart.Series> 
< / metroChart：PieChart> 
 
< / Grid> 
  

PieChart.xaml.cs

  public Page1（）
 {
 InitializeComponent（）; 
 DataContext = new ChartViewModel（）; 
} 
  

chartViewModel.cs

  namespace ModernUIForWPFSample.WithoutBackButton.Graphs.ViewModels 
 {
 public class ChartViewModel 
 {
 public ObservableCollection< stockLotsCostByYear>错误{get;私人集} 
 public ChartViewModel（）
 {
 adoraDBContext _c = new adoraDBContext（）; 
 var result = from _c.PurchasingShipments中的ps 
组ps由ps.date.Value.Year转换为grp 
 select new 
 {
 Year = grp.Key， 
 Cost = grp.Sum（x => x.NoOfPieces * x.PricePerPiece + x.Micelleneous + x.TransportCost + x.SupplierCommission）
}; 
 
 Errors = new ObservableCollection< stockLotsCostByYear>（）; 
 
 foreach（var d in result）
 Errors.Add（new stockLotsCostByYear（）{Year = d.Year，Cost = d.Cost}）; 
 
} 
 
私人对象selectedItem = null; 
 public object SelectedItem 
 {
 get 
 {
 return selectedItem; 
} 
 set 
 {
 selectedItem = value; 
} 
} 
 public class TestClass 
 {
 public string Category {get;组; } 
 
 public int Number {get;组; } 
} 
 
 public class stockLotsCostByYear 
 {
 public int Year {get;组; } 
 
 public decimal？ Cost {get;组; } 
} 
} 
  

}

  SelectedPageChart = new Uri（.. \\Graphs\\GraphTemplates\\StackedBarChart.xaml？parameter = test，UriKind.Relative）
  

和StackedBarChart cs：

  protected override void OnNavigatedTo（NavigationEventArgs e） 
 {
 string parameter = string.Empty; 
 if（NavigationContext.QueryString.TryGetValue（parameter，out参数））{
 this.label.Text = parameter; 
} 
} 
  

I'm developing a program which involves graphical chart generation according to user inputs. Data for those graphs should be retrieved from the data base according to the inputs given by the user. I'm using modern UI charts library to generate charts. You can find the library here http://modernuicharts.codeplex.com/

Here is my mainWindow.xaml's screen shot : http://imgur.com/eQUBl9w

Here user selects the graph type and pattern that he wants and the desired graph should be generated accordingly with the data available in the database. Currently I have followed the modern ui charts tutorial on above link and able to generate chart for only one LINQ query which is not based on user inputs. How can I get user inputs at runtime and execute different queries based on them and bind data at run time.

here is my mainWindo.xaml.cs

public partial class MainWindow : UserControl
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ChartController();
    }
}

ChartController.CS

public class ChartController : INotifyPropertyChanged
{
    public ObservableCollection<string> ChartTypes { get; set; }

    public ChartController()
    {
        ChartTypes = new ObservableCollection<string>();
        ChartTypes.Add("Pie");
        ChartTypes.Add("Doughnut");
        ChartTypes.Add("Clustered Bar");
        ChartTypes.Add("Clustered Column");
        ChartTypes.Add("Stacked Bar");
        ChartTypes.Add("Stacked Column");
        ChartTypes.Add("Stacked Bar Percentage");
        ChartTypes.Add("Stacked Column Percentage");
    }

    private string _simpleStringProperty;
    public string SimpleStringProperty
    {
        get { return _simpleStringProperty; }
        set
        {
            _simpleStringProperty = value;
            if (value.Equals("Pie"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\PieChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Doughnut"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\DoughnutChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Clustered Column"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\ClusteredColumnChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Clustered Bar"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\ClusteredBarChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Stacked Bar"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\StackedBarChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Stacked Column"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\StackedColumnChart.xaml", UriKind.Relative);
            }
            if (value.Equals("Stacked Bar Percentage"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\StackedBarChart100Percent.xaml", UriKind.Relative);
            }
            if (value.Equals("Stacked Column Percentage"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\StackedColumnChart100Percent.xaml", UriKind.Relative);
            }
            if (value.Equals("Radial Gauge"))
            {
                SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\RadialGaugeChart.xaml", UriKind.Relative);
            }
            OnPropertyChanged("SimpleStringProperty");

        }
    }

    private Uri _selectedPageChart;
    public Uri SelectedPageChart
    {
        get { return _selectedPageChart; }
        set
        {
            _selectedPageChart = value;
            OnPropertyChanged("SelectedPageChart");
        }
    }
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

}

PieChart.xaml

<Grid>

    <metroChart:PieChart
Style="{StaticResource MinimalChartStyle}"
ChartTitle="Minimal Pie Chart"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
        <metroChart:PieChart.Series>
            <metroChart:ChartSeries
        SeriesTitle="Errors"
        DisplayMember="Year"
        ValueMember="Cost"
        ItemsSource="{Binding Path=Errors}" />
        </metroChart:PieChart.Series>
    </metroChart:PieChart>

</Grid>

PieChart.xaml.cs

public Page1()
    {
        InitializeComponent();
        DataContext = new ChartViewModel();
    }

chartViewModel.cs

  namespace ModernUIForWPFSample.WithoutBackButton.Graphs.ViewModels
{
public class ChartViewModel
{
    public ObservableCollection<stockLotsCostByYear> Errors { get; private set; }
    public ChartViewModel()
    {
        adoraDBContext _c = new adoraDBContext();
        var result = from ps in _c.PurchasingShipments
                  group ps by ps.date.Value.Year into grp
                  select new
                  {
                      Year = grp.Key,
                      Cost = grp.Sum(x => x.NoOfPieces * x.PricePerPiece + x.Micelleneous + x.TransportCost + x.SupplierCommission)
                  }; 

        Errors = new ObservableCollection<stockLotsCostByYear>();

        foreach (var d in result)
            Errors.Add(new stockLotsCostByYear() { Year = d.Year, Cost = d.Cost });

    }

    private object selectedItem = null;
    public object SelectedItem
    {
        get
        {
            return selectedItem;
        }
        set
        {
            selectedItem = value;
        }
    }
    public class TestClass
    {
        public string Category { get; set; }

        public int Number { get; set; }
    }

    public class stockLotsCostByYear
    {
        public int Year { get; set; }

        public decimal? Cost { get; set; }
    }
}

}

解决方案

Not tested but should be something like that :

SelectedPageChart = new Uri("..\\Graphs\\GraphTemplates\\StackedBarChart.xaml?parameter=test", UriKind.Relative)

and in StackedBarChart cs :

protected override void OnNavigatedTo(NavigationEventArgs e)
{
       string parameter = string.Empty;
    if (NavigationContext.QueryString.TryGetValue("parameter", out parameter)) {
        this.label.Text = parameter;
    }
}

这篇关于如何根据用户输入使用现代UI图表生成图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！