WPF图表LiveChart使用详解

更新时间：2022年01月28日 11:22:30 作者：痕迹g

本文详细讲解了WPF图表LiveChart的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文主要介绍LiveChart.WPF 中的图表的使用方法类: 数据绑定, 数据显示样式等。

导入LiveChart.Wpf

NuGet搜索LiveChart包, 安装LiveChart.Wpf即可。

引用LiveChart.Wpf

在使用的界面当中引用LiveChart.Wpf的类库

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

以直方图、折线图为例, 都属于 CartesianChart 下的一种 Series 类型, 例如折线图,如下:

            <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                  <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
                <lvc:LineSeries/>  
            </lvc:CartesianChart.Series>
            </lvc:CartesianChart>

LinSeries 绑定数据设定Values即可, 可以看到带s, 则代表这是一种复数集合类型,继承于 IChartValues, 所以最终绑定的数据符合 ChartValues 即可, 下图绑定了为数字类型的集合:

           <lvc:CartesianChart>
            <lvc:CartesianChart.Series>
                <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现-->
                <lvc:LineSeries Values="1,2,3,4,5,6"/>
                <lvc:LineSeries Values="2,4,6,8,10,12"/>
            </lvc:CartesianChart.Series>
           </lvc:CartesianChart>

界面呈现如下所示:

接下来, 以LineSeries为例子, 来进行扩展, 添加 X 、Y坐标的定义显示。

为LiveChart的 X、Y轴添加标题

            <!--定义Y轴-->
            <lvc:CartesianChart.AxisY>
                <!-- 定义Y轴名称 -->
                <lvc:Axis Title="Value"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
            
            <!--定义X轴-->
            <lvc:CartesianChart.AxisX>
                 <!-- 定义X轴名称 -->
                <lvc:Axis Title="Type"></lvc:Axis>
            </lvc:CartesianChart.AxisX>

效果如下:

图表显示设置

1.图例的显示位置: LegendLocation="Top" //显示在上方
2.图表的背景颜色: Background="#FFEFD5"

如下所示:

3.添加视觉元素: VisualElements

如下所示添加一个文本在图表当中:

            <lvc:CartesianChart.VisualElements>
                <lvc:VisualElement X="0.5" Y="8">
                    <lvc:VisualElement.UIElement>
                        <TextBlock Foreground="Green">
                            Hello!, this is a note merged in the chart.
                        </TextBlock>
                    </lvc:VisualElement.UIElement>
                </lvc:VisualElement>
            </lvc:CartesianChart.VisualElements>

显示效果:

LineSeries 样式设置

1.线条显示数值: DataLabels="True"
2.线条是否弯曲: LineSmoothness="0" 或 "1"
3.线条的颜色: Stroke="Red" //设置线条的颜色为红色
4.线条下方颜色: Fill="Pink" //线条的下方颜色
5.线条的每个点: PointGeometrySize="20" //设置数据点大小
6.显示数据字体颜色: Foreground="Red"
7.数据点的颜色: PointForeground="#FF6347"
8.线条虚线: StrokeDashArray="5" //数值愈大间隔愈大, 如下绿色虚线

9.线条点的形状: PointGeometry //如下所示, 为数据点设置为一个矩形

        <lvc:LineSeries DataLabels="False" Stroke="#32CD32" StrokeThickness="1"   StrokeDashArray="5"
                                LineSmoothness="1" Foreground="Red"
                                Fill="#FFA07A" PointGeometrySize="10"   
                                Values="1,2,5,1,5,4">
                    <lvc:LineSeries.PointGeometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="50,50,25,25" />
                        </GeometryGroup>
                    </lvc:LineSeries.PointGeometry>
                </lvc:LineSeries>

效果如下所示:

X、Y坐标样式设置

1.是否显示坐标点: ShowLabels="False"
2.坐标点的旋转角度: LabelsRotation="45"
3.坐标轴标签: Labels="A,B,C,D,E,F" //示例
4.自定义显示格式: LabelFormatter

图表是否显示背景X、Y线:

以下代码设置,X、Y轴的宽度为1的颜色红色的实线:

            <!--定义Y轴-->
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Value"  ShowLabels="True">
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" Stroke="Red"  />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            
            <!--定义X轴-->
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Title="Type"  LabelsRotation="45" Labels="A,B,C,D,E,F" ShowLabels="True" >
                    <lvc:Axis.Separator>
                        <lvc:Separator StrokeThickness="1" Stroke="Red"  />
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>

效果如下所示:

定义饼状图

由于饼状图并没有X、Y轴的概念, 所以需要使用饼状图, 则使用 PieChart。

1.设定显示数据的格式: LabelPoint //该绑定的是一个Func的委托

Xaml绑定:

后台代码及显示效果:

到此这篇关于WPF图表LiveChart使用的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

抓取页面信息方法介绍
我们知道，一般网页中的信息是不断翻新的，这也要求我们定期的去抓这些新信息，但是这个“定期”该怎么理解，也就是多长时间需要
抓一次该页面，其实这个定期也就是页面缓存时间，在页面的缓存时间内我们再次抓取该网页是没有必要的，反而给人家服务器造成压力
2012-11-11
答你所问 .NET小常识方便学习asp.net的朋友
这篇文章主要介绍了.NET小常识，对于想学习.net的朋友有个参考，一些问答与基础介绍，对于刚开始接触.net的朋友很有帮助，下面大家一起了解下吧
2012-05-05
.Net结构型设计模式之外观模式（Facade）
这篇文章介绍了.Net结构型设计模式之外观模式（Facade），文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
WPF框架Prism中ViewModelLocator用法介绍
这篇文章介绍了WPF框架Prism中ViewModelLocator的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-02-02
C＃Web应用程序入门经典学习笔记之二
C＃Web应用程序入门经典学习笔记之二...
2006-08-08
ASP.NET HttpRequest类用法
这篇文章介绍了ASP.NET HttpRequest类用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
ASP.NET中 CheckBox复选框控件的使用
本文主要介绍ASP.NET中CheckBox复选框控件的使用，并举例演示其用法，希望对大家有所帮助。
2016-04-04
使.NET6在开发时支持IIS
这篇文章介绍了使.NET6在开发时支持IIS的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-12-12
WPF基本控件介绍
这篇文章介绍了WPF的控件结构及各种控件类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-01-01
ASP.NET Calendar日历(日期)控件使用方法
本文主要介绍Calendar日历控件的各个属性以及举例演示Calendar控件的具体使用方法，希望对大家有所帮助。
2016-04-04