來自Modern UI工具包的圖表無法正確顯示

Question

我想用一些簡單的圖表創建一個Windows應用商店應用程序，但是我發現沒有這些應用程序的圖表控件。搜索我發現的網絡有一些昂貴的第三方圖表，我買不起。最後，我發現了一個免費的工具包：http://modernuitoolkit.codeplex.com

這對我來說很好，但只適用於5個值。如果我嘗試繪製30個值，則會得到如下圖所示的所有錯誤：

在研究了提供的示例之後，我通過向圖表中添加了30個值對其進行了修改。

 List<NameValueItem> items = new List<NameValueItem>();  

     items.Add(new NameValueItem() { Name = "Test1", Value = arrayOfValue[0] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[1] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[2] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = arrayOfValue[3] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[4] }); 

     items.Add(new NameValueItem() { Name = "Test1", Value = arrayOfValue[5] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[6] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[7] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = arrayOfValue[8] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[9] }); 

     items.Add(new NameValueItem() { Name = "Test1", Value = arrayOfValue[10] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[11] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[12] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = arrayOfValue[13] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[14] }); 

     items.Add(new NameValueItem() { Name = "Test1", Value =arrayOfValue[15] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[16] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[17] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = .arrayOfValue[18] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[19] }); 

     items.Add(new NameValueItem() { Name = "Test1", Value = arrayOfValue[20] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[21] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[22] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = arrayOfValue[23] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[24] }); 

     items.Add(new NameValueItem() { Name = "Test1", Value = arrayOfValue[25] }); 
     items.Add(new NameValueItem() { Name = "Test2", Value = arrayOfValue[26] }); 
     items.Add(new NameValueItem() { Name = "Test3", Value = arrayOfValue[27] }); 
     items.Add(new NameValueItem() { Name = "Test4", Value = arrayOfValue[28] }); 
     items.Add(new NameValueItem() { Name = "Test5", Value = arrayOfValue[29] }); 


     ((ColumnSeries)Chart.Series[0]).ItemsSource = items; 
     ((BarSeries)BarChart.Series[0]).ItemsSource = items; 
     ((LineSeries)LineChart.Series[0]).ItemsSource = items; 
     ((ColumnSeries)MixedChart.Series[0]).ItemsSource = items; 
     ((LineSeries)MixedChart.Series[1]).ItemsSource = items; 
     ((AreaSeries)AreaChart.Series[0]).ItemsSource = items; 
     ((BubbleSeries)BubbleChart.Series[0]).ItemsSource = items; 
     ((ScatterSeries)ScatteredChart.Series[0]).ItemsSource = items; 

NameValueItem定義爲：

public class NameValueItem 
{ 
    private string _name; 

    public string Name 
    { 
     get { return _name; } 
     set { _name = value; } 
    } 
    private double _value; 

    public double Value 
    { 
     get { return _value; } 
     set { _value = value; } 
    } 
    public NameValueItem() 
    { 
    } 
} 

的的MainPage的Xaml看起來像這樣：

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:App17" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:Series="using:ModernUI.Toolkit.Data.Charting.Charts.Series" 
xmlns:Axis="using:ModernUI.Toolkit.Data.Charting.Charts.Axis" 
xmlns:Charting="using:ModernUI.Toolkit.Data.Charting" 

xmlns:DataPoints="using:ModernUI.Toolkit.Data.Charting.Charts.DataPoints" 

xmlns:Chart="using:ModernUI.Toolkit.Data.Charting.Charts.Chart" 
xmlns:series="using:ModernUI.Toolkit.Data.Charting.Charts.Series" 

x:Class="App17.MainPage" 
mc:Ignorable="d"> 

<Canvas x:Name="can" HorizontalAlignment="Left" Height="100" Margin="381,111,0,0" VerticalAlignment="Top" Width="100"/> 
    <Chart:Chart x:Name="Chart" HorizontalAlignment="Left" Title="Column Chart" Margin="-2,153,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <Chart:Chart.Series> 
     <series:ColumnSeries 
         Title="Population" 
         ItemsSource="{Binding Items}" 
         IndependentValueBinding="{Binding Name}" 
         DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart.Series> 
    </Chart:Chart> 
    <Chart:Chart x:Name="BarChart" HorizontalAlignment="Left" Title="Bar Chart" Margin="316,153,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:BarSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 

    <Chart:Chart x:Name="LineChart" HorizontalAlignment="Left" Title="Line Chart" Margin="-2,363,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:LineSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 
    <Chart:Chart x:Name="MixedChart" HorizontalAlignment="Left" Title="Mixed Chart" Margin="316,363,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:ColumnSeries 
      Title="Population" 
      ItemsSource="{Binding Items}" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    <series:LineSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 
    <Chart:Chart x:Name="AreaChart" HorizontalAlignment="Left" Title="Area Chart" Margin="634,363,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:AreaSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 
    <Chart:Chart x:Name="BubbleChart" HorizontalAlignment="Left" Title="Bubble Chart" Margin="634,153,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:BubbleSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 
    <Chart:Chart x:Name="ScatteredChart" HorizontalAlignment="Left" Title="Scattered Chart" Margin="952,153,0,0" VerticalAlignment="Top" Width="318" Height="190"> 
    <series:ScatterSeries 
      Title="Population" 
      IndependentValueBinding="{Binding Name}" 
      DependentValueBinding="{Binding Value}" IsSelectionEnabled="True"/> 
    </Chart:Chart> 

個

在arrayOfValue數據看起來像這樣： -3.7 -6 2.9 -0.2 1.2 2.5 -1 -1.2 -0 -5.3 -7.1 -4.8 - 1.2 0.8 -1 -1.5 -1.4 -5.2 -3.4 -6.6

Answer 1

1. 你的代碼不能編譯 - arrayOfValue太短。
2. 由於您的X軸只有5個不同的值（Test1-5），因此您只能獲得5個值 - 如果您修復此問題 - 圖表正常工作
3. 相同圖表的更新版本已集成到WinRT XAML工具包here。您可以從CodePlex獲取源代碼或從NuGet here獲取包。
4. 尋找原來的項目，我偶然發現了另一個製圖工具，可能爲你工作 - http://modernuicharts.codeplex.com