winform LiveCharts2的使用--图表的使用

介绍

对于图标，需要使用到livechart2中的CartesianChart 控件，是一个“即用型”控件，用于使用笛卡尔坐标系创建绘图。需要将Series属性分配一组ICartesianSeries。

例如下面代码，创建一个最简单的图表：

cartesianChart1.Series = new ISeries[]
{
    new LineSeries<int>
    {
        Values = new int[] { 4, 6, 5, 3, -3, -1, 2 }
    },
    new ColumnSeries<double>
    {
        Values = new double[] { 2, 5, 4, -2, 4, -3, 5 }
    }
};

代码中new LineSeries<int>表示图上的曲线图，new ColumnSeries<double>表示图上的柱状图。通过对Values赋值，来构建每一个点。也有StepLineSeries，表示步线图：

一个图标由四部分组成，分别是Series（图形）、Axes（坐标轴）、Tooltip（提示信息）、Legend（图例），分别对应图上内容：

Series介绍

LineSeries

private LineSeries<ObservableValue> m_lineSeries { get; set; }
public ISeries[] Series { get; set; }


private void cartesianChart1_Load(object sender, EventArgs e)
{
    m_lineSeries = new LineSeries<ObservableValue>()
    {
        Name = "直通率(%)",
        Values = new ObservableCollection<ObservableValue>(),
        DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Top,  // 数值显示位置
        DataLabelsPaint = new SolidColorPaint(new SKColor(45, 45, 45)),  // 设置显示在图形中的数值颜色
        LineSmoothness = 1,  // 设置曲线的平滑性， 0--1，由直到弯曲
        Fill = new SolidColorPaint(new SKColor(20, 200, 200, 128)),  // 设置图形填充，折线的下部分进行填充
    };

    List<int> ints = new List<int>() { 1, 3, 2, 5, 6 };
    m_lineSeries.Values = ints.Select(value=>new ObservableValue(value)).ToList();

    Series = [m_lineSeries];
    cartesianChart1.Series = Series;
}

List<int> ints = new List<int>() { 1, 3, 2, 5, 6 };

m_lineSeries.Values = ints.Select(value=>new ObservableValue(value)).ToList();

此处用于设置在图中描绘的点，表示的是Y轴对应的值

Series = [m_lineSeries];

cartesianChart1.Series = Series;

将series在图上绘制

属性：

Name	图例名称
Values	图形对应的点值
DataLabelsPosition	数值在图形中显示的位置	默认Top； DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Top
DataLabelsPaint	数值显示的颜色	DataLabelsPaint = new SolidColorPaint(new SKColor(45, 45, 45))
DataLabelsFormatter	数值在图像上格式化显示	DataLabelsFormatter = value => (value.Coordinate.PrimaryValue / 100).ToString("P"), 以百分比形式显示
LineSmoothness	设置曲线的平滑性	0--1，由直到弯曲
Fill	设置图形填充，图形下部分进行填充颜色	Fill = new SolidColorPaint(new SKColor(20, 200, 200, 128)) null不填充
ScalesYAt	数值对应哪一个Y轴显示（如果有多个Y轴）
Stroke	显示图形的边框属性
IsHoverable	鼠标悬停在图形点时，是否显示详细信息	默认true

DataLabelsFormatter：

"N"：数字格式（带千位分隔符）。

- 示例：1234.567.ToString("N2") → "1,234.57"

"F"：定点数格式。

- 示例：1234.567.ToString("F2") → "1234.57"

"C"：货币格式。

- 示例：1234.567.ToString("C2") → "$1,234.57"（取决于区域设置）

"P"：百分比格式。

- 示例：0.567.ToString("P2") → "56.70%"

"E"：科学计数法格式。

- 示例：1234.567.ToString("E2") → "1.23E+003"

"d"：短日期格式。

- 示例：DateTime.Now.ToString("d") → "10/15/2023"

"D"：长日期格式。

- 示例：DateTime.Now.ToString("D") → "Sunday, October 15, 2023"

"t"：短时间格式。

- 示例：DateTime.Now.ToString("t") → "10:30 AM"

"T"：长时间格式。

- 示例：DateTime.Now.ToString("T") → "10:30:45 AM"

"yyyy-MM-dd"：自定义日期格式。

- 示例：DateTime.Now.ToString("yyyy-MM-dd") → "2023-10-15"

"0.00"：强制显示两位小数。

- 示例：1234.5.ToString("0.00") → "1234.50"

"#,###"：添加千位分隔符。

- 示例：1234567.ToString("#,###") → "1,234,567"

"0.##%"：自定义百分比格式。

- 示例：0.567.ToString("0.##%") → "56.7%"

Stroke = new SolidColorPaint(new SKColor(0, 0, 0)){StrokeThickness = 2 }

new SKColor(0, 0, 0)设置边框的颜色

StrokeThickness设置绘制边框的粗细值

ColumnSeries

ColumnSeries 用于绘制柱状图，适合展示离散数据的对比。每个柱子代表一个数据点，柱子的高度由数据点的值决定。可以同时显示多个 ColumnSeries，用于比较不同类别的数据。

private ColumnSeries<ObservableValue> m_onepass_columnSeries { get; set; }
private void cartesianChart1_Load(object sender, EventArgs e)
{
    m_onepass_columnSeries = new ColumnSeries<ObservableValue>()
    {
        Name = "一次PASS",
        Values = new ObservableCollection<ObservableValue>(),
        ScalesYAt = 0,
        DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Top,  // 数值显示位置
        DataLabelsPaint = new SolidColorPaint(new SKColor(45, 45, 45)),  // 设置显示在图形中的数值颜色
        IgnoresBarPosition = true,
        MaxBarWidth = 20,
        Stroke = null,
        
    };

    List<int> ints = new List<int>() { 1, 3, 2, 5, 6 };
    m_onepass_columnSeries.Values = ints.Select(value=>new ObservableValue(value)).ToList();

    Series = [m_onepass_columnSeries];
    cartesianChart1.Series = Series;
}

属性（有相同属性，不进行介绍）：

Rx 和 Ry	设置柱子的圆角半径	Rx = 5;Ry = 5;
MaxBarWidth	设置柱子的最大宽度	MaxBarWidth = 20
IgnoresBarPosition	忽略位置显示，当有多个柱状图时，可以重叠显示	默认false

StepLineSeries

阶梯线图 通过水平线和垂直线连接数据点，形成阶梯状的折线。每个数据点的值决定了阶梯的高度。适合展示离散数据的变化，尤其是数据点之间的变化是突变的场景。

private StepLineSeries<ObservableValue> m_time_stepline { get; set; }
private void cartesianChart1_Load(object sender, EventArgs e)
{
    m_time_stepline = new StepLineSeries<ObservableValue>()
    {
        Name = "time",
        Values = new ObservableCollection<ObservableValue>(),
        ScalesYAt = 0,
    };

    List<int> ints = new List<int>() { 1, 3, 2, 5, 6 };
    m_time_stepline.Values = ints.Select(value=>new ObservableValue(value)).ToList();

    Series = [m_time_stepline];
    cartesianChart1.Series = Series;
}

属性（有相同属性，不进行介绍）：

GeometryFill	数据点的填充颜色	GeometryFill = new SolidColorPaint(SKColors.Red);
GeometryStroke	数据点的描边颜色	GeometryStroke = new SolidColorPaint(SKColors.Black);
GeometrySize	数据点的大小	GeometrySize = 10;

Axes介绍

Axes（坐标轴）用于定义数据的显示范围和刻度。可以配置为 X 轴、Y 轴，甚至是多轴（例如多个 Y 轴）。每个轴可以独立配置其外观、刻度、标签等属性。

// 定义X轴
cartesianChart1.XAxes = [
        new Axis{
        TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),  // 刻度线颜色
        TicksAtCenter = true,  // 是否位于中间
        MinStep = 1,
        SeparatorsPaint = new SolidColorPaint(new SKColor(200, 200, 200)),
        CrosshairLabelsBackground = SKColors.DarkOrange.AsLvcColor(),
        CrosshairLabelsPaint = new SolidColorPaint(SKColors.DarkRed),
        CrosshairPaint = new SolidColorPaint(SKColors.DarkOrange, 1),
        Labeler = value => value.ToString("N3")
    }];
// 定义Y轴 这里定义了两个
cartesianChart1.YAxes = [
    new Axis{
        TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),  // 刻度线颜色
        TicksAtCenter = true,  // 是否位于中间
        Position = LiveChartsCore.Measure.AxisPosition.Start,
        MinLimit = 0,
        },
        new Axis{
        Position = LiveChartsCore.Measure.AxisPosition.End,
        Labeler = (value) => (value/100).ToString("P"),
        MinLimit = 0,  // 最小范围
    }
];

XAxes 用于定义X轴属性

YAxes 用于定义Y轴属性

属性：

MinLimit MaxLimit	坐标轴的最小值和最大值。
MinStep	刻度的最小步长
TicksPaint	刻度线的颜色	TicksPaint = new SolidColorPaint(SKColors.Black)
TicksAtCenter	刻度线是否位于坐标轴的中心	默认true
SeparatorsPaint	分隔线的颜色	SeparatorsPaint = new SolidColorPaint(SKColors.Gray)
ShowSeparatorLines	是否显示分隔线	默认true
LabelsPaint	刻度标签的文字颜色	LabelsPaint = new SolidColorPaint(SKColors.Black)
LabelsRotation	刻度标签的旋转角度	LabelsRotation = 45 旋转45°
Labeler	自定义刻度标签的显示内容	Labeler = value => value.ToString("N2"); N2：显示两位小数
CrosshairLabelsBackground	十字准线标签的背景颜色	CrosshairLabelsBackground = SKColors.DarkOrange.AsLvcColor()
CrosshairLabelsPaint	十字准线标签的文字颜色	CrosshairLabelsPaint = new SolidColorPaint(SKColors.DarkRed)
CrosshairPaint	十字准线的颜色和宽度	CrosshairPaint = new SolidColorPaint(SKColors.DarkOrange, 1)
NamePaint	坐标轴标题的文字颜色
Position	坐标轴的位置	Position = LiveChartsCore.Measure.AxisPosition.Start start:左侧或下侧 end：右侧或上侧

cartesianChart

可以设置的属性：

ZoomMode	设置沿哪个轴可以拖动
LegendPosition	Legend显示的位置
LegendTextSize	Legend文本的大小
Title	图表的标题

cartesianChart1.Title = new LabelVisual
{
    Text = "chart",
    TextSize = 20,
    BackgroundColor = new LvcColor(20, 200, 200)
};

cartesianChart1.ZoomMode = LiveChartsCore.Measure.ZoomAndPanMode.X;  // 可以沿X轴拖动
cartesianChart1.LegendPosition = LiveChartsCore.Measure.LegendPosition.Bottom;  // 显示位置
cartesianChart1.LegendTextSize = 18;  // 文本大小
cartesianChart1.Dock = DockStyle.Fill;  // 布局

中文乱码

如果在使用的过程中出现中文乱码，可以试试在Main中加入这行代码：

LiveCharts.Configure(config => config.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉')));