WinRTXamlToolkit.Controls.DataVisualization.Charting图形报表下自定义控件
源码下载：单击下载
WinRTXamlToolkit.Controls.DataVisualization.Charting图形报表下自定义控件，分为单组数据SingleChart用户控件和多组数据MixedChart用户控件。传递数据集合和其它参数，让图形按需展示。
一、Model:1、UserChart图形实体类：包含以下Name（图形X轴名称），Value（图形Y轴值），Title（图形上方名称），Description（图形右侧介绍，譬如单位）字段
2、ChartEnum图形类别枚举：包含
AreaChart（区域图 1），BarChart（条形图 2），BubbleChart（气泡图 3），ColumnChart（柱状图 4），
LineChart（折线图 5），ScatterChart（散点图 6），
PieChart（饼状图 7，不适用于多组数据），MixedChart（复合图 8 线性图和柱状图(不适用与多组数据)），
Stacked100Area（百分比堆积区域图 9），Stacked100Bar（百分比堆积条形图 10），Stacked100Column（百分比堆积柱状图 11），Stacked100Line（百分比堆积折线图 12），
StackedArea（堆积区域图 13），StackedBar（堆积条形图 14），StackedColumn（堆积柱状图 15），StackedLine （堆积折线图 16）
其中1~6适用于单组数据，多组数据图形
7,8只用于单组数据图形
9~16只用于多组数据图形
代码如下：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ChartForWin8
{
/// <summary>
/// 图形实体类
/// </summary>
public class UserChart : INotifyPropertyChanged
{
/// <summary>
/// 图形X轴名称
/// </summary>
private string name;
public string Name
{
get { return name; }
set
{
name = value;
NotifyPropertyChanged("Name");
}
}
/// <summary>
/// 图形Y轴值
/// </summary>
private double _value;
public double Value
{
get { return _value; }
set
{
_value = value;
NotifyPropertyChanged("Value");
}
}
/// <summary>
/// 图形上方名称
/// </summary>
private string title;
public string Title
{
get { return title; }
set
{
title = value;
NotifyPropertyChanged("Title");
}
}
/// <summary>
/// 图形右侧介绍
/// </summary>
private string description;
public string Description
{
get { return description; }
set
{
description = value;
NotifyPropertyChanged("Description");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
/// <summary>
/// 图形类型枚举
/// </summary>
public enum ChartEnum
{
//区域图
AreaChart = 1,
//条形图
BarChart = 2,
//气泡图
BubbleChart = 3,
//柱状图
ColumnChart = 4,
//折线图
LineChart = 5,
//散点图
ScatterChart = 6,
//饼状图(不适用于多组数据)
PieChart = 7,
//复合图，线性图和柱状图(不适用于多组数据)
MixedChart = 8,
//百分比堆积区域图
Stacked100Area = 9,
//百分比堆积条形图
Stacked100Bar = 10,
//百分比堆积柱状图
Stacked100Column = 11,
//百分比堆积折线图
Stacked100Line = 12,
//堆积区域图
StackedArea = 13,
//堆积条形图
StackedBar = 14,
//堆积柱状图
StackedColumn = 15,
//堆积折线图
StackedLine = 16,
}
}
二、用户控件介绍
1、单组数据图形使用SingleChart用户控件
构造函数：SingleChart(ObservableCollection<UserChart> items, ChartEnum charType, bool hideLegend)
需传递 UserChart的数据集合；需展现的 图形类型ChartEnum（可以的包含1~8）；是否显示 图形右侧介绍Description
用法：
SingleChart sc = new SingleChart(items, (ChartEnum)rd.Next(1, 9), false);
singleChart.Children.Clear();//singleChart为容器Grid，放置图形
singleChart.Children.Add(sc);
2、多组数据图形使用MixedChart用户控件
构造函数：MixedChart(Dictionary<int, ObservableCollection<UserChart>> Dic, ObservableCollection<ChartEnum> enumLists)
需传递 UserChart数据集合的字典；每组需展现的 图形类型ChartEnum（可用于1~6（多组图形类型不要求一致，但不能与图形类型9~16混用）,9~16（多组图形类型必须一致））。
（其中Dic的键与enumLists的键一一对应，即Dic[i]代表的数据集合与enumLists[i]代表的图形类型一一对应）
用法：
MixedChart mc = new MixedChart(Dic,enumLists);
mixedChart.Children.Clear();
mixedChart.Children.Add(mc);
三、SingleChart用户控件详解
1、页面XMAL
<UserControl
x:Class="ChartForWin8.SingleChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChartForWin8"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:controls="using:WinRTXamlToolkit.Controls"
xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
xmlns:Series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<!--区域图 AreaChart 1 -->
<FlipView
x:Name="AreaChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="AreaChart"
Title="Area Chart"
Margin="0,0">
<charting:AreaSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<!--条形图 BarChart 2 -->
<FlipView
x:Name="BarChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="BarChart"
Title="Bar Chart"
Margin="0,0">
<charting:BarSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<!--气泡图 BubbleChart 3 -->
<FlipView
x:Name="BubbleChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="BubbleChart"
Title="Bubble Chart"
Margin="0,0">
<charting:BubbleSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<!--柱状图 ColumnChart 4 -->
<FlipView
x:Name="ColumnChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="ColumnChart"
Title="Column Chart"
Margin="0,0">
<charting:Chart.Series>
<charting:ColumnSeries
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart.Series>
</charting:Chart>
</FlipView>
<!--折线图 LineChart 5 -->
<FlipView
x:Name="LineChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="LineChart"
Title="Line Chart"
Margin="10,0">
<charting:LineSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True"/>
</charting:Chart>
</FlipView>
<!--散点图 ScatterChart 6 -->
<FlipView
x:Name="ScatterChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="ScatterChart"
Title="Scatter Chart"
Margin="0,0">
<charting:ScatterSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<!--饼状图 PieChart 7 -->
<FlipView
x:Name="PieChartsFlip" Visibility="Collapsed">
<charting:Chart
x:Name="PieChart"
Title=""
Margin="0,0">
<charting:Chart.Series>
<Series:PieSeries
Margin="0,0"
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True"
/>
</charting:Chart.Series>
</charting:Chart>
</FlipView>
<!--复合图 MixedChart 8 线性图和柱状图 -->
<FlipView
x:Name="MixedChartFlip" Visibility="Collapsed">
<charting:Chart
x:Name="MixedChart"
Title="Mixed Chart"
Margin="0,0">
<charting:ColumnSeries
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
<charting:LineSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<!-- 以下保留未用 -->
<FlipView
x:Name="PieChartWithCustomDesignFlip" Visibility="Collapsed">
<charting:Chart
x:Name="PieChartWithCustomDesign"
Title="Pie Chart with Custom Design"
Margin="0,0">
<charting:Chart.Palette>
<charting:ResourceDictionaryCollection>
<!-- Gold -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="Gold" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Green -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="GreenYellow" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Blue -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="LightSkyBlue" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Purple -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="MediumPurple" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Brown -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="SandyBrown" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
</charting:ResourceDictionaryCollection>
</charting:Chart.Palette>
<charting:Chart.TitleStyle>
<Style
TargetType="datavis:Title">
<Setter
Property="Background"
Value="#444" />
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
<Setter
Property="VerticalContentAlignment"
Value="Top" />
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Padding"
Value="10" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="datavis:Title">
<Border
CornerRadius="10"
Background="{TemplateBinding Background}">
<ContentPresenter
FontSize="36"
FontWeight="SemiBold"
FontStretch="Condensed"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:Chart.TitleStyle>
<charting:Chart.LegendStyle>
<Style
TargetType="datavis:Legend">
<Setter
Property="VerticalAlignment"
Value="Stretch" />
<Setter
Property="Background"
Value="#444" />
<Setter
Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<controls:UniformGrid
Columns="1"
Rows="15" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter
Property="TitleStyle">
<Setter.Value>
<Style
TargetType="datavis:Title">
<Setter
Property="Margin"
Value="0,5,0,10" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="HorizontalAlignment"
Value="Center" />
</Style>
</Setter.Value>
</Setter>
<Setter
Property="ItemContainerStyle"
xmlns:series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting">
<Setter.Value>
<Style
TargetType="series:LegendItem">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="series:LegendItem">
<Border
MinWidth="200"
Margin="20,10"
CornerRadius="10"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{Binding Background}">
<datavis:Title
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="24"
FontWeight="Bold"
Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="datavis:Legend">
<Border
CornerRadius="10"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<datavis:Title
Grid.Row="0"
x:Name="HeaderContent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{TemplateBinding TitleStyle}" />
<ScrollViewer
Grid.Row="1"
VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="0"
IsTabStop="False">
<ItemsPresenter
x:Name="Items"
Margin="10,0,10,10" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:Chart.LegendStyle>
<charting:Chart.Series>
<Series:PieSeries
Title="Population"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart.Series>
</charting:Chart>
</FlipView>
<FlipView
x:Name="LineChartWithAxesFlip" Visibility="Collapsed">
<charting:Chart
x:Name="LineChartWithAxes"
Title="Line Chart w/Manually Set Axis Range"
Margin="0,0">
<charting:LineSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</charting:Chart>
</FlipView>
<FlipView
x:Name="LineChart2Flip" Visibility="Collapsed">
<charting:Chart
x:Name="LineChart2"
Title="Line Chart Without Data Points"
Margin="0,0">
<charting:LineSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True">
<charting:LineSeries.DataPointStyle>
<Style
TargetType="charting:LineDataPoint">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Width"
Value="0" />
<Setter
Property="Height"
Value="0" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="charting:LineDataPoint">
<Grid
x:Name="Root"
Opacity="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:LineSeries.DataPointStyle>
</charting:LineSeries>
</charting:Chart>
</FlipView>
<FlipView
x:Name="StackedBarFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedBar"
Title="Stacked Bar Chart"
Margin="0,0">
<charting:StackedBarSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Doodad" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Gizmo" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Widget" />
</charting:StackedBarSeries>
</charting:Chart>
</FlipView>
<FlipView
x:Name="StackedBar100Flip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedBar100"
Title="100% Stacked Bar Chart"
Margin="0,0">
<charting:Stacked100BarSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Doodad" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Gizmo" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Widget" />
</charting:Stacked100BarSeries>
</charting:Chart>
</FlipView>
<FlipView
x:Name="StackedColumnFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedColumn"
Title="Stacked Column Chart"
Margin="0,0">
<charting:StackedColumnSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Doodad" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Gizmo" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Widget" />
</charting:StackedColumnSeries>
</charting:Chart>
</FlipView>
<FlipView
x:Name="StackedColumn100Flip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedColumn100"
Title="100% Stacked Column Chart"
Margin="0,0">
<Series:Stacked100ColumnSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Doodad" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Gizmo" />
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="Widget" />
</Series:Stacked100ColumnSeries>
</charting:Chart>
</FlipView>
</Grid>
</UserControl>
2、后台
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Display;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using WinRTXamlToolkit.Controls.DataVisualization.Charting;
// “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供
namespace ChartForWin8
{
public sealed partial class SingleChart : UserControl
{
public SingleChart(ObservableCollection<UserChart> items, ChartEnum charType, bool hideLegend)
{
this.InitializeComponent();
BindChart(items, charType, hideLegend);
}
/// <summary>
/// 数据绑定
/// </summary>
/// <param name="items">数据集合</param>
/// <param name="charType">图表类型</param>
/// <param name="hideLegend">是否隐藏Description</param>
public void BindChart(ObservableCollection<UserChart> items, ChartEnum charType, bool hideLegend)
{
if (charType == ChartEnum.PieChart)
{
((PieSeries)this.PieChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.PieChart.Title = items.First().Title;
}
hideAllFilpButThis(PieChartsFlip);
}
else if (charType == ChartEnum.ColumnChart)
{
((ColumnSeries)this.ColumnChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.ColumnChart.Title = items.First().Title;
((ColumnSeries)this.ColumnChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(ColumnChartFlip);
if (hideLegend)
{
hideLegendStyle(ColumnChart);
}
}
else if (charType == ChartEnum.BarChart)
{
((BarSeries)this.BarChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.BarChart.Title = items.First().Title;
((BarSeries)this.BarChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(BarChartFlip);
if (hideLegend)
{
hideLegendStyle(BarChart);
}
}
else if (charType == ChartEnum.LineChart)
{
((LineSeries)this.LineChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.LineChart.Title = items.First().Title;
((LineSeries)this.LineChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(LineChartFlip);
if (hideLegend)
{
hideLegendStyle(LineChart);
}
}
else if (charType == ChartEnum.MixedChart)
{
((ColumnSeries)this.MixedChart.Series[0]).ItemsSource = items;
((LineSeries)this.MixedChart.Series[1]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.MixedChart.Title = items.First().Title;
((ColumnSeries)this.MixedChart.Series[0]).Title = items.First().Description;
((LineSeries)this.MixedChart.Series[1]).Title = items.First().Description;
}
hideAllFilpButThis(MixedChartFlip);
if (hideLegend)
{
hideLegendStyle(MixedChart);
}
}
else if (charType == ChartEnum.AreaChart)
{
((AreaSeries)this.AreaChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.AreaChart.Title = items.First().Title;
((AreaSeries)this.AreaChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(AreaChartFlip);
if (hideLegend)
{
hideLegendStyle(AreaChart);
}
}
else if (charType == ChartEnum.BubbleChart)
{
((BubbleSeries)this.BubbleChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.BubbleChart.Title = items.First().Title;
((BubbleSeries)this.BubbleChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(BubbleChartFlip);
if (hideLegend)
{
hideLegendStyle(BubbleChart);
}
}
else if (charType == ChartEnum.ScatterChart)
{
((ScatterSeries)this.ScatterChart.Series[0]).ItemsSource = items;
if (items != null && items.Count > 0)
{
this.ScatterChart.Title = items.First().Title;
((ScatterSeries)this.ScatterChart.Series[0]).Title = items.First().Description;
}
hideAllFilpButThis(ScatterChartFlip);
if (hideLegend)
{
hideLegendStyle(ScatterChart);
}
}
else
{
if (items != null && items.Count > 0)
{
this.PieChart.Title = items.First().Title;
}
hideAllFilpButThis(PieChartsFlip);
}
}
/// <summary>
/// 隐藏所有FlipView除了传递过来的
/// </summary>
/// <param name="sender"></param>
public void hideAllFilpButThis(FlipView sender)
{
PieChartsFlip.Visibility = Visibility.Collapsed;
PieChartWithCustomDesignFlip.Visibility = Visibility.Collapsed;
ColumnChartFlip.Visibility = Visibility.Collapsed;
BarChartFlip.Visibility = Visibility.Collapsed;
LineChartFlip.Visibility = Visibility.Collapsed;
LineChartWithAxesFlip.Visibility = Visibility.Collapsed;
LineChart2Flip.Visibility = Visibility.Collapsed;
MixedChartFlip.Visibility = Visibility.Collapsed;
AreaChartFlip.Visibility = Visibility.Collapsed;
BubbleChartFlip.Visibility = Visibility.Collapsed;
ScatterChartFlip.Visibility = Visibility.Collapsed;
StackedBarFlip.Visibility = Visibility.Collapsed;
StackedBar100Flip.Visibility = Visibility.Collapsed;
StackedColumnFlip.Visibility = Visibility.Collapsed;
StackedColumn100Flip.Visibility = Visibility.Collapsed;
sender.Visibility = Visibility.Visible;
}
/// <summary>
/// 隐藏Legend（Description）
/// </summary>
/// <param name="sender"></param>
public void hideLegendStyle(Chart sender)
{
Style legendStyle = new Style();
legendStyle.TargetType = typeof(Control);
Setter setterWidth = new Setter(Control.WidthProperty, 0);
Setter setterHeight = new Setter(Control.HeightProperty, 0);
legendStyle.Setters.Add(setterWidth);
legendStyle.Setters.Add(setterHeight);
sender.LegendStyle = legendStyle;
}
}
}
四、MIxedChart用户控件详解
1、页面XMAL
<UserControl
x:Class="ChartForWin8.MixedChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChartForWin8"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:controls="using:WinRTXamlToolkit.Controls"
xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
xmlns:Series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<!--复合图，多组图形复合 -->
<FlipView
x:Name="MixedChartFlip">
<charting:Chart
x:Name="MyMixedChart"
Title=""
Margin="0,0">
<charting:Chart.Palette>
<charting:ResourceDictionaryCollection>
<!-- Blue -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="LightSkyBlue" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Yellow -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="YellowGreen" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- LightCoral -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="LightCoral" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Brown -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="SandyBrown" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Purple -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="MediumPurple" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Gold -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="Gold" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Green -->
<ResourceDictionary>
<SolidColorBrush
x:Key="Background"
Color="GreenYellow" />
<Style
x:Key="DataPointStyle"
TargetType="Control">
<Setter
Property="Background"
Value="{StaticResource Background}" />
</Style>
<Style
x:Key="DataShapeStyle"
TargetType="Shape">
<Setter
Property="Stroke"
Value="{StaticResource Background}" />
<Setter
Property="StrokeThickness"
Value="2" />
<Setter
Property="StrokeMiterLimit"
Value="1" />
<Setter
Property="Fill"
Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
</charting:ResourceDictionaryCollection>
</charting:Chart.Palette>
</charting:Chart>
</FlipView>
<!--百分比堆积区域图 Stacked100Area 9 -->
<FlipView
x:Name="Stacked100AreaFlip" Visibility="Collapsed">
<charting:Chart
x:Name="Stacked100Area"
Title=""
Margin="0,0">
<charting:Stacked100AreaSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:Stacked100AreaSeries>
</charting:Chart>
</FlipView>
<!--百分比堆积条形图 Stacked100Bar 10 -->
<FlipView
x:Name="Stacked100BarFlip" Visibility="Collapsed">
<charting:Chart
x:Name="Stacked100Bar"
Title=""
Margin="0,0">
<charting:Stacked100BarSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:Stacked100BarSeries>
</charting:Chart>
</FlipView>
<!--百分比堆积柱状图 Stacked100Column 11 -->
<FlipView
x:Name="Stacked100ColumnFlip" Visibility="Collapsed">
<charting:Chart
x:Name="Stacked100Column"
Title=""
Margin="0,0">
<charting:Stacked100ColumnSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:Stacked100ColumnSeries>
</charting:Chart>
</FlipView>
<!--百分比堆积折线图 Stacked100Line 12 -->
<FlipView
x:Name="Stacked100LineFlip" Visibility="Collapsed">
<charting:Chart
x:Name="Stacked100Line"
Title=""
Margin="0,0">
<charting:Stacked100LineSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:Stacked100LineSeries>
</charting:Chart>
</FlipView>
<!--堆积区域图 StackedArea 13 -->
<FlipView
x:Name="StackedAreaFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedArea"
Title=""
Margin="0,0">
<charting:StackedAreaSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:StackedAreaSeries>
</charting:Chart>
</FlipView>
<!--堆积条形图 StackedBar 14 -->
<FlipView
x:Name="StackedBarFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedBar"
Title="Stacked Bar Chart"
Margin="0,0">
<charting:StackedBarSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:StackedBarSeries>
</charting:Chart>
</FlipView>
<!--堆积柱状图 StackedColumn 15 -->
<FlipView
x:Name="StackedColumnFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedColumn"
Title="Stacked Column Chart"
Margin="0,0">
<charting:StackedColumnSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:StackedColumnSeries>
</charting:Chart>
</FlipView>
<!--堆积折线图 StackedLine 16 -->
<FlipView
x:Name="StackedLineFlip" Visibility="Collapsed">
<charting:Chart
x:Name="StackedLine"
Title=""
Margin="0,0">
<charting:StackedLineSeries>
<charting:SeriesDefinition
DependentValuePath="Value"
IndependentValuePath="Name"
IsTapEnabled="True"
Title="" />
</charting:StackedLineSeries>
</charting:Chart>
</FlipView>
</Grid>
</UserControl>
2、后台
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Display;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using WinRTXamlToolkit.Controls.DataVisualization.Charting;
// “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供
namespace ChartForWin8
{
public sealed partial class MixedChart : UserControl
{
public MixedChart(Dictionary<int, ObservableCollection<UserChart>> chartListDic, ObservableCollection<ChartEnum> enumLists)
{
this.InitializeComponent();
BindChart(chartListDic, enumLists);
}
/// <summary>
/// 数据绑定
/// </summary>
/// <param name="items">数据集合</param>
/// <param name="charType">图表类型</param>
/// <param name="hideLegend">是否隐藏Description</param>
public void BindChart(Dictionary<int, ObservableCollection<UserChart>> chartListDic, ObservableCollection<ChartEnum> enumLists)
{
//Stacked100AreaSeries Stacked100LineSeries StackedAreaSeries StackedLineSeries 父容器初始化底下需要内容（可以在刚开始给它内容（Series），然后使用时清除掉Series.Clear()），否则会报错
Stacked100AreaSeries stacked100Area = new Stacked100AreaSeries();
Stacked100BarSeries stacked100Bar = new Stacked100BarSeries();
Stacked100ColumnSeries stacked100Column = new Stacked100ColumnSeries();
Stacked100LineSeries stacked100Line = new Stacked100LineSeries();
StackedAreaSeries stackedArea = new StackedAreaSeries();
StackedBarSeries stackedBar = new StackedBarSeries();
StackedColumnSeries stackedColumn = new StackedColumnSeries();
StackedLineSeries stackedLine = new StackedLineSeries();
MyMixedChart.Series.Clear();
if (chartListDic.Count == enumLists.Count && enumLists.Count > 0)
{
for (int i = 0; i < enumLists.Count; i++)
{
if (enumLists[i] == ChartEnum.AreaChart)//区域图 1
{
AreaSeries s = new AreaSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.BarChart)//条形图 2
{
BarSeries s = new BarSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.BubbleChart)//气泡图 3
{
BubbleSeries s = new BubbleSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.ColumnChart)//柱状图 4
{
ColumnSeries s = new ColumnSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.LineChart)//线性图 5
{
LineSeries s = new LineSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.ScatterChart)//散点图 6
{
ScatterSeries s = new ScatterSeries();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsSelectionEnabled = true;
MyMixedChart.Series.Add(s);
}
else if (enumLists[i] == ChartEnum.Stacked100Area)//百分比堆积区域图 9
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stacked100Area.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.Stacked100Bar)//百分比堆积条形图 10
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stacked100Bar.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.Stacked100Column)//百分比堆积柱状图 11
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stacked100Column.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.Stacked100Line)//百分比堆积折线图 12
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
s.ItemsSource = chartListDic[i];
stacked100Line.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.StackedArea)//堆积区域图 13
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stackedArea.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.StackedBar)//堆积条形图 14
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stackedBar.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.StackedColumn)//堆积柱状图 15
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stackedColumn.SeriesDefinitions.Add(s);
}
else if (enumLists[i] == ChartEnum.StackedLine)//堆积折线图 16
{
SeriesDefinition s = new SeriesDefinition();
s.Title = chartListDic[i].First().Description;
s.ItemsSource = chartListDic[i];
s.IndependentValueBinding = new Binding { Path = new PropertyPath("Name") };
s.DependentValueBinding = new Binding { Path = new PropertyPath("Value") };
s.IsTapEnabled = true;
stackedLine.SeriesDefinitions.Add(s);
}
}
//堆积图
if (enumLists.First() == ChartEnum.Stacked100Area)
{
Stacked100Area.Series.Clear();
hideAllFilpButThis(Stacked100AreaFlip);
Stacked100Area.Title = chartListDic[0].First().Title;
Stacked100Area.Series.Add(stacked100Area);
}
else if (enumLists.First() == ChartEnum.Stacked100Bar)
{
Stacked100Bar.Series.Clear();
hideAllFilpButThis(Stacked100BarFlip);
Stacked100Bar.Title = chartListDic[0].First().Title;
Stacked100Bar.Series.Add(stacked100Bar);
}
else if (enumLists.First() == ChartEnum.Stacked100Column)
{
Stacked100Column.Series.Clear();
hideAllFilpButThis(Stacked100ColumnFlip);
Stacked100Column.Title = chartListDic[0].First().Title;
Stacked100Column.Series.Add(stacked100Column);
}
else if (enumLists.First() == ChartEnum.Stacked100Line)
{
Stacked100Line.Series.Clear();
hideAllFilpButThis(Stacked100LineFlip);
Stacked100Line.Title = chartListDic[0].First().Title;
Stacked100Line.Series.Add(stacked100Line);
}
else if (enumLists.First() == ChartEnum.StackedArea)
{
StackedArea.Series.Clear();
hideAllFilpButThis(StackedAreaFlip);
StackedArea.Title = chartListDic[0].First().Title;
StackedArea.Series.Add(stackedArea);
}
else if (enumLists.First() == ChartEnum.StackedBar)
{
StackedBar.Series.Clear();
hideAllFilpButThis(StackedBarFlip);
StackedBar.Title = chartListDic[0].First().Title;
StackedBar.Series.Add(stackedBar);
}
else if (enumLists.First() == ChartEnum.StackedColumn)
{
StackedColumn.Series.Clear();
hideAllFilpButThis(StackedColumnFlip);
StackedColumn.Title = chartListDic[0].First().Title;
StackedColumn.Series.Add(stackedColumn);
}
else if (enumLists.First() == ChartEnum.StackedLine)
{
StackedLine.Series.Clear();
hideAllFilpButThis(StackedLineFlip);
StackedLine.Title = chartListDic[0].First().Title;
StackedLine.Series.Add(stackedLine);
}
else
{
hideAllFilpButThis(MixedChartFlip);
MyMixedChart.Title = chartListDic[0].First().Title;
}
}
}
/// <summary>
/// 隐藏所有FlipView除了传递过来的
/// </summary>
/// <param name="sender"></param>
public void hideAllFilpButThis(FlipView sender)
{
MixedChartFlip.Visibility = Visibility.Collapsed;
Stacked100AreaFlip.Visibility = Visibility.Collapsed;
Stacked100BarFlip.Visibility = Visibility.Collapsed;
Stacked100ColumnFlip.Visibility = Visibility.Collapsed;
Stacked100LineFlip.Visibility = Visibility.Collapsed;
StackedAreaFlip.Visibility = Visibility.Collapsed;
StackedBarFlip.Visibility = Visibility.Collapsed;
StackedColumnFlip.Visibility = Visibility.Collapsed;
StackedLineFlip.Visibility = Visibility.Collapsed;
sender.Visibility = Visibility.Visible;
}
}
}
五、首页MainPage
1、页面XMAL
<Page
x:Class="ChartForWin8.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChartForWin8"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
</Grid.RowDefinitions>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Content="GotoSingleChart" Click="GotoSingleChart_Click" ></Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Content="GotoMixedChart" Click="GotoMixedChart_Click"></Button>
<Grid x:Name="singleChart" Grid.Row="1" Grid.Column="0"></Grid>
<Grid Grid.Row="1" Grid.Column="1" x:Name="mixedChart"></Grid>
</Grid>
</Page>
2、后台
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍
namespace ChartForWin8
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void GotoMixedChart_Click(object sender, RoutedEventArgs e)
{
#region 混合图形
Random rd = new Random();
//图形类型集合
ObservableCollection<ChartEnum> enumLists = new ObservableCollection<ChartEnum>();
//数据集合字典
Dictionary<int, ObservableCollection<UserChart>> Dic = new Dictionary<int, ObservableCollection<UserChart>>();
ObservableCollection<UserChart> items1 = new ObservableCollection<UserChart>();
items1.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
items1.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
items1.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
items1.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
items1.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
ChartEnum chartEnum1 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
enumLists.Add(chartEnum1);
Dic.Add(0, items1);
ObservableCollection<UserChart> items2 = new ObservableCollection<UserChart>();
items2.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
items2.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
items2.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第二季度", Title = "" });
items2.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
items2.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
ChartEnum chartEnum2 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
enumLists.Add(chartEnum2);
Dic.Add(1, items2);
ObservableCollection<UserChart> items3 = new ObservableCollection<UserChart>();
items3.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
items3.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
items3.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
items3.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
items3.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
ChartEnum chartEnum3 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
enumLists.Add(chartEnum3);
Dic.Add(2, items3);
ObservableCollection<UserChart> items4 = new ObservableCollection<UserChart>();
items4.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
items4.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
items4.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
items4.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
items4.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
ChartEnum chartEnum4 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
enumLists.Add(chartEnum4);
Dic.Add(3, items4);
int temp = rd.Next(1, 17);
//if (temp >= 9)
//{
// enumLists[0] = (ChartEnum)temp;
// enumLists[1] = (ChartEnum)temp;
// enumLists[2] = (ChartEnum)temp;
// enumLists[3] = (ChartEnum)temp;
//}
if (temp == 7 || temp == 8)
{
enumLists[0] = (ChartEnum)1;
enumLists[1] = (ChartEnum)1;
enumLists[2] = (ChartEnum)1;
enumLists[3] = (ChartEnum)1;
}
//temp = 16;
//enumLists[0] = (ChartEnum)temp;
//enumLists[1] = (ChartEnum)temp;
//enumLists[2] = (ChartEnum)temp;
//enumLists[3] = (ChartEnum)temp;
MixedChart mc = new MixedChart(Dic,enumLists);
mixedChart.Children.Clear();
mixedChart.Children.Add(mc);
#endregion
}
private void GotoSingleChart_Click(object sender, RoutedEventArgs e)
{
Random rd = new Random();
#region 单一图形
ObservableCollection<UserChart> items = new ObservableCollection<UserChart>();
items.Add(new UserChart { Name = "一月", Value = rd.Next(10, 100), Description = "单位：亿元", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "二月", Value = rd.Next(10, 100), Description = "CaroGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "三月", Value = rd.Next(10, 100), Description = "EvaGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "四月", Value = rd.Next(10, 100), Description = "GwendolynGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "五月", Value = rd.Next(10, 100), Description = "SandraGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "六月", Value = rd.Next(10, 100), Description = "CharlesGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "七月", Value = rd.Next(10, 100), Description = "MarkGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "八月", Value = rd.Next(10, 100), Description = "BillGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "九月", Value = rd.Next(10, 100), Description = "VincentGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "十月", Value = rd.Next(10, 100), Description = "WilliamGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "十一月", Value = rd.Next(10, 100), Description = "VincentGrad", Title = "2014 上海 CPI年率" });
items.Add(new UserChart { Name = "十二月", Value = rd.Next(10, 100), Description = "WilliamGrad", Title = "2014 上海 CPI年率" });
SingleChart sc = new SingleChart(items, (ChartEnum)rd.Next(1, 9), false);
singleChart.Children.Clear();
singleChart.Children.Add(sc);
#endregion
//#region 混合图形
//Random rd = new Random();
////图形类型集合
//ObservableCollection<ChartEnum> enumLists = new ObservableCollection<ChartEnum>();
////数据集合字典
//Dictionary<int, ObservableCollection<UserChart>> Dic = new Dictionary<int, ObservableCollection<UserChart>>();
//ObservableCollection<UserChart> items1 = new ObservableCollection<UserChart>();
//items1.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
//items1.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
//items1.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
//items1.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
//items1.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第一季度", Title = "2014 CPI年率" });
//ChartEnum chartEnum1 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
//enumLists.Add(chartEnum1);
//Dic.Add(0, items1);
//ObservableCollection<UserChart> items2 = new ObservableCollection<UserChart>();
//items2.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
//items2.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
//items2.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第二季度", Title = "" });
//items2.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
//items2.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第二季度", Title = "2014 CPI年率" });
//ChartEnum chartEnum2 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
//enumLists.Add(chartEnum2);
//Dic.Add(1, items2);
//ObservableCollection<UserChart> items3 = new ObservableCollection<UserChart>();
//items3.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
//items3.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
//items3.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
//items3.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
//items3.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第三季度", Title = "2014 CPI年率" });
//ChartEnum chartEnum3 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
//enumLists.Add(chartEnum3);
//Dic.Add(2, items3);
//ObservableCollection<UserChart> items4 = new ObservableCollection<UserChart>();
//items4.Add(new UserChart { Name = "Amy", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
//items4.Add(new UserChart { Name = "Caroline", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
//items4.Add(new UserChart { Name = "Eva", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
//items4.Add(new UserChart { Name = "Gwendolyn", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
//items4.Add(new UserChart { Name = "Sandra", Value = rd.Next(10, 100), Description = "第四季度", Title = "2014 CPI年率" });
//ChartEnum chartEnum4 = (ChartEnum)rd.Next(1, 7);//ChartEnum.BarChart;
//enumLists.Add(chartEnum4);
//Dic.Add(3, items4);
//int temp = rd.Next(1, 17);
//if (temp >= 9)
//{
// enumLists[0] = (ChartEnum)temp;
// enumLists[1] = (ChartEnum)temp;
// enumLists[2] = (ChartEnum)temp;
// enumLists[3] = (ChartEnum)temp;
//}
//MixedChart mm = new MixedChart(Dic, enumLists);
//mixedChart.Children.Clear();
//mixedChart.Children.Add(mm);
//#endregion
}
}
}
六、效果
1、SingleChart图
饼状图
复合图，线性图和柱状图
有单位区域图
2、MixedChart图
百分比堆积区域图
百分比堆积条形图
百分比堆积折线图
百分比堆积柱状图
堆积区域图
堆积条形图
堆积折线图
堆积柱状图
复合图
复合图1
3、单组数据多组数据对比图
气泡图
区域图
散点图
条形图
线性图
柱状图