<<Live Charts>>
首先安装包
解决方案-管理nu-get管理
搜索LiveCharts.Wpf 安装
然后界面添加引用
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
在后端代码也添加命名空间
using LiveCharts;
using LiveCharts.Wpf;
一
一个呈线性变化,实时更新
第一个则呈直线性展示
xaml界面代码
<UserControl x:Class="Wpf.CartesianChart.MaterialCards.MaterialCards"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Wpf.CartesianChart.MaterialCards"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="800"
Background="#E9E9E9">
<Grid Height="500" Width="650" >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Margin="15, -60, 15, 15" MaxHeight="350">
<Grid.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
</Grid.Effect>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border1}" />
</Grid.OpacityMask>
<Grid.Resources>
<Style TargetType="lvc:LineSeries">
<Setter Property="StrokeThickness" Value="3"></Setter>
<Setter Property="Stroke" Value="White"></Setter>
<Setter Property="Fill" Value="#4EFFFFFF"></Setter>
<Setter Property="PointGeometrySize" Value="0"></Setter>
<Setter Property="LineSmoothness" Value="0"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="ShowLabels" Value="False"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height=".50*"></RowDefinition>
<RowDefinition Height=".5*"></RowDefinition>
</Grid.RowDefinitions>
<Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />
<Border Grid.Row="0" Grid.RowSpan="3" Background="#CE2156" ></Border>
<TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
The Current Chart
</TextBlock>
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
<lvc:CartesianChart Grid.Row="2" Margin="0, 0, 0, 0" Series="{Binding LastHourSeries}" Hoverable="False" DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
<lvc:Axis MinValue="2"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
<StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
<TextBlock Opacity=".4" FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture, StringFormat={}{0:N1}}" />
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Margin="15, 20, 15, 15" MaxHeight="350">
<Grid.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
</Grid.Effect>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Border2}" />
</Grid.OpacityMask>
<Grid.Resources>
<Style TargetType="lvc:ColumnSeries">
<Setter Property="StrokeThickness" Value="0"></Setter>
<Setter Property="Stroke" Value="White"></Setter>
<Setter Property="Fill" Value="White"></Setter>
<Setter Property="MaxColumnWidth" Value="5"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="Foreground" Value="#64FFFFFF"></Setter>
<Style.Triggers>
<Trigger Property="AxisOrientation" Value="Y">
<Setter Property="IsMerged" Value="True"></Setter>
<Setter Property="MaxValue" Value="10"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="lvc:Separator">
<Setter Property="StrokeThickness" Value="1"></Setter>
<Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
<Style.Triggers>
<Trigger Property="AxisOrientation" Value="X">
<Setter Property="IsEnabled" Value="False"></Setter>
<Setter Property="Step" Value="1"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height=".50*"></RowDefinition>
<RowDefinition Height=".5*"></RowDefinition>
</Grid.RowDefinitions>
<Border x:Name="Border2" Grid.Row="0" Grid.RowSpan="4" CornerRadius="5" Background="White" />