先上图:
代码部分:
<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>