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>
相关推荐
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟9 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor10 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter11 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝12 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽13 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥14 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div19 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.20 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉21 分钟前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6