wpf livechart 绘制笛卡尔曲线

先上图:

代码部分:

cs 复制代码
                <GroupBox Header="各生产线生产量趋势">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="45"/>
                            <RowDefinition Height="auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Border  CornerRadius="5" Background="#EAEAF7" 
                            VerticalAlignment="Center" HorizontalAlignment="Right"
                            Margin="15,0">
                            <Border.Resources>
                                <Style TargetType="RadioButton">
                                    <Setter Property="Width" Value="40"/>
                                    <Setter Property="Height" Value="25"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="FontSize" Value="11"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="RadioButton">
                                                <Border CornerRadius="5"  Background="{TemplateBinding Background}">
                                                    <ContentPresenter  HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Background" Value="#5665F4"></Setter>
                                            <Setter Property="Foreground" Value="White"></Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Resources>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border Background="#DDD" Width="1" Grid.Column="1" Margin="0,5"/>
                                <Border Background="#DDD" Width="1" Grid.Column="3" Margin="0,5"/>
                                <Border Background="#DDD" Width="1" Grid.Column="5" Margin="0,5"/>
                                <RadioButton Content="天" IsChecked="True"/>
                                <RadioButton Content="周" Grid.Column="2"/>
                                <RadioButton Content="月" Grid.Column="4"/>
                                <RadioButton Content="季度" Grid.Column="6"/>
                            </Grid>
                        </Border>
                        <StackPanel  Margin="20,10" TextBlock.Foreground="#888"  ForceCursor="True"  Grid.Row="1" HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Center">
                            <Border Width="10" Height="4" Background="#5966F1"/>
                            <TextBlock Text="生产线1" Margin="10,0,30,0"/>

                            <Border Width="10" Height="4" Background="#01BAC0"/>
                            <TextBlock Text="生产线2" Margin="10,0,30,0"/>

                            <Border Width="10" Height="4" Background="#FF7371"/>
                            <TextBlock Text="生产线3" Margin="10,0,30,0"/>

                            <Border Width="10" Height="4" Background="#FFC90C"/>
                            <TextBlock Text="生产线4" Margin="10,0,30,0"/>
                        </StackPanel>
                        <!--CartesianChart Series:序列  axis 轴线  chartesian 笛卡尔 -->
                        <lvc:CartesianChart Margin="20,10" Grid.Row="2">
                            <lvc:CartesianChart.Series>
                                <lvc:LineSeries  Stroke="#5966F1"  Title="生产线11" LineSmoothness="0"    PointGeometrySize="0" Values="22,28,38,35,30,21,32,40,39,35">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush  EndPoint="0,1" 
StartPoint="0,0">
                                            <GradientStop Color="#095770F0" Offset="0.5"></GradientStop>
                                            <GradientStop Color="Transparent"  Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                                <lvc:LineSeries Values="8,9,10,9.5,9,9.5,12,8,13,7" LineSmoothness="1"  Title="生产线2"  Stroke="#03B9B7"  PointGeometrySize="0" >
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#09FF7778" Offset="0.5"></GradientStop>
                                            <GradientStop Color="Transparent" Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                                <lvc:LineSeries Values="8,9,10,9.5,9,9.5,12,8,13,7" 
                 LineSmoothness="0" PointGeometrySize="0"
                 Stroke="#FF7778" Title="生产线3">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#09FF7778" Offset="0.5"/>
                                            <GradientStop Color="Transparent" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>

                                <lvc:LineSeries Values="4,2,5,4.5,5,4.5,6,7,2,4" 
                 LineSmoothness="0" PointGeometrySize="0"
                 Stroke="#FFCA06" Title="生产线3">
                                    <lvc:LineSeries.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#09FFCA06" Offset="0.5"/>
                                            <GradientStop Color="Transparent" Offset="1"/>
                                        </LinearGradientBrush>
                                    </lvc:LineSeries.Fill>
                                </lvc:LineSeries>
                            </lvc:CartesianChart.Series>

                            <lvc:CartesianChart.AxisX>
                                <lvc:Axis Labels="09.01,09.02,09.03,09.04,09.05,09.06,09.07,09.08,09.09,09.10">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="1" StrokeThickness="2"></lvc:Separator>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisX>
                            <lvc:CartesianChart.AxisY >
                                <lvc:Axis MinValue="0" MaxValue="50" LabelFormatter="{Binding YLableFormater}">
                                    <lvc:Axis.Separator>
                                        <lvc:Separator Step="10" Stroke="#ddd" StrokeThickness="0.5" ></lvc:Separator>
                                    </lvc:Axis.Separator>
                                </lvc:Axis>
                            </lvc:CartesianChart.AxisY>
                        </lvc:CartesianChart>
                    </Grid>


                </GroupBox>
相关推荐
FlyWIHTSKY8 分钟前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上10 分钟前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器
QZ1665609515931 分钟前
政务泛监测体系能力排行:AI 重塑监测边界,治理的颗粒度革命
网络·人工智能·安全·网络安全·政务
量化分析码农37 分钟前
【Python量化多因子实战 04】因子暴露不是 alpha:市值与行业中性化实战
前端·后端
叼烟扛炮40 分钟前
Linux 学习笔记(五十八):IO 多路复用封神——epoll 底层原理揭秘
linux·运维·服务器·网络·笔记·学习·php
叼烟扛炮1 小时前
Linux 学习笔记(五十一):数据链路层与 ARP 协议——局域网寻址与黑客骗局
linux·网络·网络协议·php·tcpdump
不可能片场1 小时前
Electron 发布 正文写入的三条通道与读回口径
前端·electron
jerrywus1 小时前
让 AI 帮你部署 Vercel,报错了也不用手动搬日志
前端·agent·mcp
补码缩写1 小时前
11 行 Python 拆 PNG 块,解压后的字节数能手算
前端
coding漫漫长路1 小时前
PNG压缩先看图是哪一类,先无损再量化多半白做
前端