2

I am trying to create a Windows Store app with some simple charts, however i found that there is no chart controls for these apps. Searching the net i found there is some expensive third party charts that i cannot afford. In the end i found a free Toolkit from: http://modernuitoolkit.codeplex.com

This worked fine for me, but just for 5 values. if i try to graph 30 values it gets all messed up as illustrated in the picture below: enter image description here

After studying the example provided i modified it by adding 30 values to the chart.

        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 is defined as:

  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()
    {
    }
}

The MainPage Xaml looks like this:

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

the data in the arrayOfValue looks like this: -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

4

1 に答える 1

3
  1. Your code doesn't compile - arrayOfValue is too short.
  2. You're only getting 5 values because your X axis only has 5 different values (Test1-5) - if you fix that - the charts work fine
  3. A newer version of the same charts has been integrated into WinRT XAML Toolkit here. You can grab the source code from CodePlex or a package from NuGet here.
  4. Looking for the original project I stumbled upon another charting toolkit that might work for you - http://modernuicharts.codeplex.com
于 2013-03-13T17:14:23.357 に答える