SplineArea系列
概述
RadCartesianChart可视化SplineAreaSeries图表上由坐标轴和连接这些数列所表示的数据点的直线段所包围的区域。的SplineAreaSeries扩展CategoricalStrokedSeries,所以他们也是CategoricalSeries并且需要一个CategoricalAxis和一个NumricalAxis.
特性
- 中风(颜色):改变线条的颜色。
- StrokeThickness(double):改变线条的宽度。
- 填满(颜色):更改用于填充区域形状的颜色。
例子
下面是一个用SplineArea系列创建RadCartesianChart的例子:
首先,创建所需的业务对象,例如:
公共类CategoricalData{公共对象类别{获取;设置;} public double值{get;设置;}}
然后创建一个ViewModel:
公共类CategoricalViewModel {public ObservableCollection Data {get;设置;} public CategoricalViewModel(){此。数据= GetCategoricalData();}私有静态ObservableCollection < CategoricalData > GetCategoricalData () {var数据= new ObservableCollection < CategoricalData >{新CategoricalData{类别=“绿化”,价值= 52},新CategoricalData{类别=“美味极了”,价值= 19},新CategoricalData{类别=“附近”,价值= 82},新CategoricalData{类别=“家庭”,价值= 23},新CategoricalData{类别=“新鲜”,价值= 56},};返回数据;}}
最后,使用下面的代码片段在XAML和c#中声明一个带有SplineArea Series的RadCartesianChart:
< telerikChart: RadCartesianChart > < telerikChart: RadCartesianChart。BindingContext> BindingContext > < telerikChart: RadCartesianChart。HorizontalAxis> < telerikChart: RadCartesianChart。VerticalAxis> < telerikChart: RadCartesianChart。系列>
var chart = new RadCartesianChart {BindingContext = new SeriesNumericalViewModel(), HorizontalAxis = new NumericalAxis() {LabelFitMode = AxisLabelFitMode。MultiLine}, VerticalAxis = new NumericalAxis(), Series = {new ScatterSplineSeries {XValueBinding = new PropertyNameDataPointBinding("XData"), YValueBinding = new PropertyNameDataPointBinding("YData")}, new ScatterSplineSeries {XValueBinding = new PropertyNameDataPointBinding("XData"), YValueBinding = new PropertyNameDataPointBinding("YData")}}};chart.Series [0] .SetBinding (ChartSeries。ItemsSourceProperty Data1);chart.Series [1] .SetBinding (ChartSeries。ItemsSourceProperty”Data2”);
在哪里telerikChart命名空间如下:
xmlns: telerikChart = " clr-namespace: Telerik.XamarinForms.Chart;装配= Telerik.XamarinForms.Chart”
使用Telerik.XamarinForms.Chart;
结果如下:
定制例子
var series = new splineareasseries {Stroke = new Color(0.6, 0.6, 0.9), StrokeThickness = 5, Fill = new Color(0.8, 0.8, 1)};
![定制SplineAreaSeries](http://www.aliitrade.com/docs/devtools/xamarin/controls/chart/series/cartesian/images/cartesian-spline-area-series-customization-example.png)