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在图上绘制

属性：

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;
}

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

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;
}

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

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轴属性

属性：

cartesianChart

可以设置的属性：

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('汉')));