因为SerialChart控件是可以加载LineGraph、ColumnGraph和AreaGraph三种控件的,所以提供了一个Graphs属性,可以通过Graphs属性来添加多个图形。代码如下所示:
SerialChart.xaml文件主要代码
------------------------------------------------------------------------------------------------------------------
<amq:SerialChart x:Name="chart1" DataSource="{Binding Data}" CategoryValueMemberPath="cat1" AxisForeground="White" PlotAreaBackground="Black" GridStroke="DarkGray">
<amq:SerialChart.Graphs>
<amq:LineGraph ValueMemberPath="val1" Title="Line #1" Brush="Blue" />
<amq:ColumnGraph ValueMemberPath="val2" Title="Column #2" Brush="#8000FF00" ColumnWidthAllocation="0.4" />
<amq:AreaGraph ValueMemberPath="val3" Title="Area #1" Brush="#80FF0000" />
</amq:SerialChart.Graphs>
</amq:SerialChart>
SerialChart.xaml.cs文件主要代码
------------------------------------------------------------------------------------------------------------------
// 图表数据实体类
public class TestDataItem
{
// cat1表示X轴的分类
public string cat1 { get; set; }
// 用来作为LineGraph图形的展示数据
public double val1 { get; set; }
// 用来作为ColumnGraph图形的展示数据
public double val2 { get; set; }
// 用来作为AreaGraph图形的展示数据
public decimal val3 { get; set; }
}
private ObservableCollection<TestDataItem> _data = new ObservableCollection<TestDataItem>()
{
new TestDataItem() { cat1 = "cat1", val1=5, val2=15, val3=12},
new TestDataItem() { cat1 = "cat2", val1=13.2, val2=1.5, val3=2.1M},
new TestDataItem() { cat1 = "cat3", val1=25, val2=5, val3=2},
new TestDataItem() { cat1 = "cat4", val1=8.1, val2=1, val3=8},
new TestDataItem() { cat1 = "cat5", val1=8.1, val2=1, val3=4},
new TestDataItem() { cat1 = "cat6", val1=8.1, val2=1, val3=10},
};
// 绑定的数据集合属性
public ObservableCollection<TestDataItem> Data { get { return _data; } }
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
this.DataContext = this;
}