WPF图表Live Charts（二）设置_livecharts 更改统计表名字

简介

上一篇介绍Live Charts的基础，接下介绍一下如何实现简单的图表定制。对曲线的颜色，填充，图表标题等进行简单的修改。

设置曲线

首先实例化一条折线

LineSeries mylineseries = new LineSeries();
1

设置折线名称

mylineseries.Title = "night";
1

设置折线颜色

mylineseries.Stroke = System.Windows.Media.Brushes.Black ;
1

设置折线粗细

mylineseries.StrokeThickness = 10;
1

设置折线样式

mylineseries.StrokeDashArray = new System.Windows.Media.DoubleCollection { 2 };
1

设置折线是否光滑

mylineseries.LineSmoothness = 1;
1

设置折线填充颜色

mylineseries.Fill = System.Windows.Media.Brushes.LightBlue  ;
1

设置图表

首先在前台给图表命名

<lvc:CartesianChart x:Name="mychart" Series="{Binding SeriesCollection}"/ >
1

设置图表的背景颜色

mychart.Background = System.Windows.Media.Brushes.Gray ;
1

设置图示位置

mychart.LegendLocation = LegendLocation.Top ;
1

设置轴线

首先在前台对轴线命名

<lvc:CartesianChart.AxisX>
	<lvc:Axis x:Name="myaxisx"/>
</lvc:CartesianChart.AxisX>
1
2
3

设置轴线粗细

myaxisx.Separator.StrokeThickness = 10;
1

设置轴线间隔

myaxisx.Separator.Step = 0.5;
1

设置轴线标题

myaxisx.Title = "Date";
1

设置轴线标题

myaxisx.Position = AxisPosition.RightTop;
1

设置坐标轴标签

myaxisx.Labels = new[]{ "Mon", "Tue","Wen","Thu","Fri","Sat","Sun"};
1

设置坐标轴标签旋转角度

myaxisx.LabelsRotation = 45;
1

设置提示

首先在前台对提示命名

 <lvc:CartesianChart.DataTooltip>
	<lvc:DefaultTooltip x:Name="mytooltip"  />
</lvc:CartesianChart.DataTooltip>
1
2
3

设置提示的背景颜色

mytooltip.Background = System.Windows.Media.Brushes.LightCyan ;
1

设置提示的选择模式

mytooltip.SelectionMode = TooltipSelectionMode.OnlySender;
1

设置提示框的圆角半径

mytooltip.CornerRadius = new CornerRadius(5);
1

设置提示框的边框颜色和大小

mytooltip.BorderBrush = System.Windows.Media.Brushes.Yellow ;
mytooltip.BorderThickness = new Thickness (2);
1
2

以上所有后台代码设置均可以在前台实现同样的设置
部分前台设置如下：

            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="star" LabelFormatter="{Binding Formatter}" ></lvc:Axis>
            </lvc:CartesianChart.AxisY>
1
2
3

程序代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

运行截图