Modern UI Toolkit中的图表无法正确呈现

时间：2013-03-13 13:25:21

标签： c# xaml windows-8 windows-runtime windows-store-apps

我正在尝试使用一些简单的图表创建一个Windows应用商店应用，但是我发现这些应用没有图表控件。在网上搜索我发现有一些我负担不起的昂贵的第三方图表。最后，我发现了一个免费的工具包：http://modernuitoolkit.codeplex.com

这对我来说很好，但只有5个值。如果我试图绘制30个值，它会变得混乱，如下图所示： enter image description here

在研究了提供的示例后，我通过在图表中添加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

1 个答案:

答案 0 :(得分：3)

  1. 您的代码无法编译 - arrayOfValue太短。
  2. 你只得到5个值，因为你的X轴只有5个不同的值（Test1-5） - 如果你修复了 - 图表工作正常
  3. WinRT XAML Toolkit here中集成了相同图表的较新版本。您可以从CodePlex获取源代码，也可以从NuGet here获取包。
  4. 寻找原始项目我偶然发现了另一个可能适合您的图表工具包 - http://modernuicharts.codeplex.com
相关问题
最新问题