2

我正在尝试使用一些简单的图表创建一个 Windows Store 应用程序，但是我发现这些应用程序没有图表控件。在网上搜索我发现有一些我买不起的昂贵的第三方图表。最后我找到了一个免费的工具包：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

4

1 回答 1

3
  1. 您的代码无法编译 - arrayOfValue 太短。
  2. 你只得到 5 个值，因为你的 X 轴只有 5 个不同的值（Test1-5） - 如果你修复它 - 图表工作正常
  3. 相同图表的较新版本已在此处集成到 WinRT XAML 工具包中。您可以在此处从 CodePlex 或 NuGet 中获取源代码。
  4. 在寻找原始项目时，我偶然发现了另一个可能适合您的图表工具包 - http://modernuicharts.codeplex.com
于 2013-03-13T17:14:23.357 回答