简介
上一篇介绍Live Charts的基础,接下介绍一下如何实现简单的图表定制。对曲线的颜色,填充,图表标题等进行简单的修改。
设置曲线
首先实例化一条折线
LineSeries mylineseries = new LineSeries();
设置折线名称
mylineseries.Title = "night";
设置折线颜色
mylineseries.Stroke = System.Windows.Media.Brushes.Black ;
设置折线粗细
mylineseries.StrokeThickness = 10;
设置折线样式
mylineseries.StrokeDashArray = new System.Windows.Media.DoubleCollection { 2 };
设置折线是否光滑
mylineseries.LineSmoothness = 1;
设置折线填充颜色
mylineseries.Fill = System.Windows.Media.Brushes.LightBlue ;
设置图表
首先在前台给图表命名
<lvc:CartesianChart x:Name="mychart" Series="{Binding SeriesCollection}"/ >
设置图表的背景颜色
mychart.Background = System.Windows.Media.Brushes.Gray ;
设置图示位置
mychart.LegendLocation = LegendLocation.Top ;
设置轴线
首先在前台对轴线命名
<lvc:CartesianChart.AxisX>
<lvc:Axis x:Name="myaxisx"/>
</lvc:CartesianChart.AxisX>
设置轴线粗细
myaxisx.Separator.StrokeThickness = 10;
设置轴线间隔
myaxisx.Separator.Step = 0.5;
设置轴线标题
myaxisx.Title = "Date";
设置轴线标题
myaxisx.Position = AxisPosition.RightTop;
设置坐标轴标签
myaxisx.Labels = new[]{ "Mon", "Tue","Wen","Thu","Fri","Sat","Sun"};
设置坐标轴标签旋转角度
myaxisx.LabelsRotation = 45;
设置提示
首先在前台对提示命名
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip x:Name="mytooltip" />
</lvc:CartesianChart.DataTooltip>
设置提示的背景颜色
mytooltip.Background = System.Windows.Media.Brushes.LightCyan ;
设置提示的选择模式
mytooltip.SelectionMode = TooltipSelectionMode.OnlySender;
设置提示框的圆角半径
mytooltip.CornerRadius = new CornerRadius(5);
设置提示框的边框颜色和大小
mytooltip.BorderBrush = System.Windows.Media.Brushes.Yellow ;
mytooltip.BorderThickness = new Thickness (2);
以上所有后台代码设置均可以在前台实现同样的设置
部分前台设置如下:
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="star" LabelFormatter="{Binding Formatter}" ></lvc:Axis>
</lvc:CartesianChart.AxisY>
程序代码
<Window x:Class="chart_line.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:chart_line"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="grid">
<lvc:CartesianChart x:Name="mychart" Series="{Binding SeriesCollection}" >
<lvc:CartesianChart.AxisX>
<lvc:Axis x:Name="myaxisx"/>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="star" LabelFormatter="{Binding Formatter}" ></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip x:Name="mytooltip" />
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</Window>
using LiveCharts;
using LiveCharts.Wpf;
namespace chart_line
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public SeriesCollection SeriesCollection { get; set; }
public Func<double, string> Formatter { get; set; }
public MainWindow()
{
InitializeComponent();
LineSeries mylineseries = new LineSeries();
mylineseries.Title = "night";
mylineseries.Stroke = System.Windows.Media.Brushes.Blue ;
mylineseries.StrokeThickness = 10;
mylineseries.StrokeDashArray = new System.Windows.Media.DoubleCollection { 2 };
mylineseries.LineSmoothness = 1;
mylineseries.Fill = System.Windows.Media.Brushes.LightBlue ;
//mylineseries.PointGeometry = null;
mychart.LegendLocation = LegendLocation.Top ;
mychart.Background = System.Windows.Media.Brushes.Gray ;
myaxisx.Separator.StrokeThickness = 10;
myaxisx.Separator.Stroke= System.Windows.Media.Brushes.Red;
myaxisx.Separator.Step = 0.5;
myaxisx.Title = "Date";
myaxisx.Position = AxisPosition.RightTop;
//myaxisx.IsMerged = true;
myaxisx.LabelsRotation = 45;
myaxisx.Labels = new[]{ "Mon", "Tue","Wen","Thu","Fri","Sat","Sun"};
//mytooltip.BulletSize = 10;
mytooltip.Background = System.Windows.Media.Brushes.LightCyan ;
mytooltip.SelectionMode = TooltipSelectionMode.OnlySender;
mytooltip.CornerRadius = new CornerRadius(5);
mytooltip.BorderBrush = System.Windows.Media.Brushes.Yellow ;
mytooltip.BorderThickness = new Thickness (2);
double[] mynum = { 1, 3, 1, 6, 2, 9, 4 };
mylineseries.Values = new ChartValues<double> ( mynum );
Formatter = value => value + "-N";
SeriesCollection = new SeriesCollection {mylineseries};
DataContext = this;
}
}
}