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>
相关推荐
小兵张健2 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_2 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪2 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰4 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒4 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice5 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄5 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队6 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰6 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans6 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端