一个轻量级、支持 MVVM 的高可定制开源 WPF 图表控件 

DotNet技术匠 6 天前 | 显示全部楼层 | 阅读模式

『7x24小时有问必答』

前言

在 WPF 应用开发中，数据可视化是不可或缺的一部分。而一个优秀的图表控件不仅需要具备良好的性能和丰富的功能，还需要与 MVVM 架构完美兼容，以满足开发对代码可维护性和解耦性的需求。
MvvmChart  正是这样一款为 WPF（包括 .NET Core）平台设计的开源图表控件。它不仅体积小巧、功能强大，而且完全支持 MVVM 模式，开发者可以通过数据绑定轻松实现图表的动态创建与自定义。

项目介绍

MvvmChart  是一个专为 WPF 设计的轻量级图表库，适用于需要高度可定制化、良好性能以及完整 MVVM 支持的数据可视化场景。它支持多种系列类型（折线图、面积图、散点图、柱状图），并且这些图表可以灵活叠加或动态移除。
目前该项目已支持  .NET Framework  平台，未来也将推出对  .NET Core  和  .NET 5/6+  的支持。

项目功能

支持四种图表类型

折线图（LineSeries）
面积图（AreaSeries）
散点图（ScatterSeries）
柱状图（BarSeries）

所有图表类型支持三种堆叠模式

Normal（普通）
Stacked（堆叠）
Stacked 100%（百分比堆叠）

折线图和面积图支持三种几何样式

Polyline（直线）
Stepline（阶梯线）
Spinline（样条曲线）
支持时间数据（DateTime 和 DateTimeOffset）及分类数据
轴支持多种位置设置（X轴顶部/底部，Y轴左侧/右侧）
支持网格线（GridLine）、十字准星（CrossHair）、图例（Legend）和背景元素（BackgroundElement）
支持通过绑定或样式模板进行高度定制
提供接口  ISeriesGeometryBuilder，允许开发自定义图表几何形状

项目特点

1、极轻量级：整个代码库仅约 6000 行代码，几乎没有冗余。
2、完美支持 MVVM：所有图表组件如 Series、LegendItem、BarItem 等均可通过 DataTemplate 数据绑定方式动态创建。
3、高可扩展性：几乎所有元素都可以通过 Binding、Style 或 Template 进行自定义。
4、高性能表现：即使在大量数据和复杂交互下也能保持流畅运行。
5、跨平台部署潜力：虽然当前主要面向 .NET Framework，但架构设计上易于迁移到 .NET Core 及更高版本。

项目技术

MvvmChart 主要基于以下核心技术：
WPF：用于构建桌面应用程序的 UI 框架
MVVM 架构：实现视图与业务逻辑分离，提升代码可维护性
数据绑定：通过 Binding 实现动态图表更新
模板化设计：使用 DataTemplate 定义图表项外观
泛型集合：结合 ObservableCollection 实现动态数据更新
数值转换器：支持 DateTime/DateTimeOffset 到 Double 的自动转换
几何绘制：提供 ISeriesGeometryBuilder 接口用于自定义图形渲染

项目使用

1、创建 ViewModel

public  classSomePoint

{

       publicdouble  t {  get; }

       publicdouble  Y {  get; }

}

publicclassSomePointList  :  BindableBase

{

       publicint  Index {  get; }

       public  ObservableCollection<somepoint> DataList {  get; }

       public  SomePointList(int  index)

      {

             this.Index = index;

             this.DataList =  new  ObservableCollection<somepoint>();

      }

}

publicclassDemoDataViewModel

{

       public  List<list<somepoint>> ItemsSourceList {  get; }

}

2、定义 DataTemplate

<DataTemplate  x:Key="MySeriesTemplate"  DataType="local:SomePointList">

       <chart:SeriesControl  IndependentValueProperty="t"

                                        DependentValueProperty="Y"

                                        ItemsSource="{Binding DataList}">

             <chart:SeriesControl.LineSeries>

                   <chart:PolyLineSeries  Stroke="{Binding Index, Converter={StaticResource IndexToStrokeConverter}}"  />

             <!--chart:SeriesControl.LineSeries-->

             <chart:SeriesControl.AreaSeries>

                   <chart:PolyLineAreaSeries  Stroke="{Binding Index, Converter={StaticResource IndexToAreaSeriesFillConverter}}"  />

             <!--chart:SeriesControl.AreaSeries-->

             <chart:SeriesControl.ScatterSeries>

                   <chart:ScatterSeries  />

             <!--chart:SeriesControl.ScatterSeries-->

       <!--chart:SeriesControl-->

<!--DataTemplate-->

3、使用 Chart 控件

<chart:Chart  Background="Bisque"

                    SeriesTemplate="{StaticResource MySeriesTemplate}"

                    SeriesItemsSource="{Binding ItemsSourceList, Source={StaticResource DemoDataViewModel}}">

       <chart:Chart.XAxis>

             <chart:NumericAxis  Title="t values"/>

       <!--chart:Chart.XAxis-->

       <chart:Chart.YAxis>

             <chart:NumericAxis  Title="Y values"/>

       <!--chart:Chart.YAxis-->

<!--chart:Chart-->

4、使用时间数据（DateTime / DateTimeOffset）

MvvmChart 支持时间类型的自动转换，开发者只需提供格式化显示的转换器即可：
public  classDoubleToDateTimeStringConverter  :  IValueConverter

{

       public  object  Convert(object  value, Type targetType,  object  parameter, CultureInfo culture)

      {

             var  q = (double)value;

             var  t = DoubleValueConverter.DoubleToDateTimeOffset(q);

             return  t.ToString("yyyy MMMM dd");

      }

       public  object  ConvertBack(object  value, Type targetType,  object  parameter, CultureInfo culture)

      {

             thrownew  NotImplementedException();

      }

}

并在 XAML 中绑定该转换器：
<chart:Chart  SeriesDataTemplate="{StaticResource SeriesTemplate}"

                    SeriesItemsSource="{Binding ItemsSourceList, Source={StaticResource TimeSeriesViewModel}}">

       <chart:Chart.XAxis>

             <chart:NumericAxis  LabelTextConverter="{StaticResource DoubleToDateTimeStringConverter}"/>

       <!--chart:XAxis-->

<!--chart:Chart-->

项目效果

MvvmChart 已经实现了多个典型图表展示，包括：

折线图 + 散点图组合

折线图 + 散点图 + 面积图组合

柱状图

折线图 + 散点图 + 柱状图组合

时间轴图表（支持 DateTime/DateTimeOffset 类型）

可以通过下载源码并运行演示程序查看完整效果。

项目源码

MvvmChart 已发布至 NuGet，可通过以下命令安装：
Install-Package MvvmChartWpfFX

GitHub：https://github.com/zenjia/MvvmChart

总结

MvvmChart 是一个专为 WPF 开发打造的轻量级、高性能、支持 MVVM 架构的图表控件。它不仅提供了丰富的图表类型和灵活的自定义能力，还通过数据绑定机制极大地简化了图表的动态生成流程。
不管是企业级应用开发者还是个人项目爱好者，MvvmChart 都能帮助大家快速实现高质量的图表展示功能。

关键词

最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。也可以加入微信公众号[DotNet技术匠]  社区，与其他热爱技术的同行一起交流心得，共同成长！
作者：小码编匠
出处：gitee.com/smallcore/DotNetCore
声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！

END

方便大家交流、资源共享和共同成长
纯技术交流群，需要加入的小伙伴请扫码，并备注【加群】

推荐阅读

觉得有收获？不妨分享让更多人受益
关注「DotNet技术匠」，共同提升技术实力

收藏
点赞
分享
在
</list<somepoint></somepoint></somepoint>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

更多帖子推荐

举报 回复
倒序浏览

62查看0回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

DotNet技术匠

帖子 3805 篇

关注 私信
上一主题上一主题         下一主题下一主题
© 2001-2026 PLC技术网-可编程控制器技术门户
QQ手机版小黑屋粤ICP备17165530号

关于我们·投诉举报· 用户帮助· 联系我们 · 本站服务 · 版权声明· 隐私政策 · 投搞指南

法律保护：PLC技术网，plcjs.com,plcjs.net等字样
Copyright 2010-2030. All rights reserved. 


微信公众号二维码 抖音二维码 百家号二维码 今日头条二维码哔哩哔哩二维码