WPF LiveCharts 折线图XY轴关联赋值，可显示不同时间段数据

最新推荐文章于 2025-03-10 10:23:17 发布

就是这样911

最新推荐文章于 2025-03-10 10:23:17 发布

阅读量6k

点赞数 10

分类专栏： WPF LiveCharts 文章标签： wpf c#

本文链接：https://blog.csdn.net/baidu_35108020/article/details/118915745

版权

WPF LiveCharts 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何利用LiveCharts库在C#中创建图表，特别是解决X轴标签与数据错位的问题。通过设置Mapper映射X轴为时间，Y轴为值，并通过单独定义X轴系列添加自定义标签，实现了月份或其他自定义文字与数据点的一一对应。示例代码展示了如何添加折线图并配置图表工具提示和轴标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章来源于日常工作需求，情况如图

如果按照X轴，Y轴互不关联的独立赋值方式那么得到的结果是这样的

可以看到B、C的数据和X轴的月份对应是错乱的，而我们想得到的应该是这样：

上代码

public class Model
        {
            public double time { get; set; }
            public double value { get; set; }
        }

这里用来表示单个数据节点，记录了该节点X、Y坐标。

var mapper = Mappers.Xy<Model>()
                .X(model => model.time)
                .Y(model => model.value);

            Charting.For<Model>(mapper);

声明mapper，并将XY对应到time和value上，用于LiveCharts

            cv = new ChartValues<Model>();
            cv.Add(new Model { time = 0, value = 1 });
            cv.Add(new Model { time = 1, value = 2 });
            cv.Add(new Model { time = 2, value = 3 });
            cv.Add(new Model { time = 3, value = 4 });
            cv.Add(new Model { time = 4, value = 5 });
            LineSeries line1 = new LineSeries
            {
                Title = "A",
                Values = cv

            };
            seriesCollection.Add(line1);

举例A折线的添加

重点：这里的x坐标也就是在mapper里面对应到time的地方，录入的是0、1、2、3、4，但是最后显示的确实1月、2月、3月、4月、5月

      <lvc:CartesianChart DataTooltip="{x:Null}" Series="{Binding seriesCollection}" 
          LegendLocation="Bottom">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis x:Name="axisX" Labels="{Binding labels}">
                    <lvc:Axis.Separator>
                        <lvc:Separator  Step="1"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX> 
        </lvc:CartesianChart>

做法是还要单独建立一个X Series，并给它添加Labels，这样一来你录入的0便会自动对应到X轴的第一个标签上可以是1月也可以是北京，上海，或者其他任何你希望显示的东西

主体的东西就这些了，如果对你有用，还请点个赞