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>
相关推荐
小tenten7 分钟前
js延迟for内部循环方法
开发语言·前端·javascript
幻影浪子15 分钟前
Web网站常用测试工具
前端·测试工具
暮志未晚Webgl26 分钟前
94. UE5 GAS RPG 实现攻击击退效果
java·前端·ue5
二川bro39 分钟前
Vue2 和 Vue3 区别 — 源码深度解析
前端
软件技术NINI1 小时前
vue组件通信,点击传值,动态传值(父传子,子传父)
前端·javascript·vue.js
暖锋丫1 小时前
echarts实现湖南省地图并且定时轮询
前端·javascript·echarts
姜西西_1 小时前
[网络编程]通过java用TCP实现网络编程
java·网络·tcp/ip
萌新小码农‍2 小时前
matlab基本语法
网络·数据结构·matlab
余生逆风飞翔2 小时前
前端代码上传文件
开发语言·前端·javascript
Feng_Sean2 小时前
01_Python基本语法
开发语言·网络·python