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>
相关推荐
小辰记事本5 小时前
从零读懂RoCEv2数据包构造:从WQE到线缆上的完整旅程
服务器·网络·网络协议·rdma
LaughingZhu5 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫5 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux6 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
北京耐用通信6 小时前
全域适配工业场景耐达讯自动化Modbus TCP 转 PROFIBUS 网关轻松实现以太网与现场总线互通
网络·人工智能·网络协议·自动化·信息与通信
在角落发呆6 小时前
Linux转发配置:解锁网络互联的核心密码
linux·运维·网络
前端若水7 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger7 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)7 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态7 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态