LiveChart应用笔记-为图表添加图例，并添加隐藏曲线功能

本文主要介绍为LiveChart图表添加自定义图例，并实现曲线隐藏功能。其中，图例中的直线样式与图表中的曲线样式进行了绑定。

第一步。添安装LiveChart.wpf 包、引入命名空间等前期准备

   xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

第二步。添加测试曲线

为曲线绑定数据源及加载请参考LiveChart应用笔记-折线图添加任意数据

     <lvc:CartesianChart Margin="20">
                                <!--LegendLocation="Top"-->
                                <lvc:CartesianChart.Series>
                                    <lvc:LineSeries x:Name="TestSeries"
                                                    Title="测试曲线"
                                                    Style="{StaticResource AssistLineChartSeriesStyle}"
                                                    Stroke="{StaticResource  Lime500SolidColorBrushStyle}"
                                                    Fill="#55cddc39"
                                                    StrokeDashArray="15 1 1 1"
                                                    Values="{Binding DailyStatisticsCollection}"
                                                    Configuration="{Binding TestSeriesCartesianMappers}" />
                                </lvc:CartesianChart.Series>
                                <!--定义Y轴-->
                                <lvc:CartesianChart.AxisY>
                                    <lvc:Axis Title="数量"
                                              FontSize="16"
                                              MinValue="0"
                                              ShowLabels="True">
                                        <lvc:Axis.Separator>
                                            <lvc:Separator StrokeThickness="1"
                                                           Stroke="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                        </lvc:Axis.Separator>
                                    </lvc:Axis>
                                </lvc:CartesianChart.AxisY>
                                <!--定义X轴-->
                                <lvc:CartesianChart.AxisX>
                                    <lvc:Axis Title="日期"
                                              FontSize="16"
                                              Labels="{Binding XLabel}"
                                              ShowLabels="True">
                                        <lvc:Axis.Separator>
                                            <lvc:Separator StrokeThickness="1"
                                                           Stroke="{StaticResource AssistFourthSolidColorBrushStyle}" />
                                        </lvc:Axis.Separator>
                                    </lvc:Axis>
                                </lvc:CartesianChart.AxisX>
                            </lvc:CartesianChart>

第三步。添加图例

    <StackPanel Orientation="Horizontal"
                                            Cursor="Hand">
                                    <Line Style="{StaticResource WpLineStyle}"
                                          StrokeThickness="{Binding Source={x:Reference Name=TestSeries},Path=StrokeThickness}"
                                          StrokeDashArray="{Binding Source={x:Reference Name=TestSeries},Path=StrokeDashArray}"
                                          Stroke="{Binding Source={x:Reference Name=TestSeries},Path=Stroke}"
                                          Fill="{Binding Source={x:Reference Name=TestSeries},Path=Stroke}"
                                          Opacity="{Binding Source={x:Reference Name=TestSeries},Path=Visibility,Converter={StaticResource legendColorOpacityConverter}}" />
                                    <TextBlock Text="测试"
                                               FontSize="16"
                                               Foreground="{Binding Source={x:Reference Name=TestSeries},Path=Stroke}"
                                               Opacity="{Binding Source={x:Reference Name=TestSeries},Path=Visibility,Converter={StaticResource legendColorOpacityConverter}}" />
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="MouseLeftButtonUp">
                                            <i:InvokeCommandAction Command="{Binding LegendClickCmd}"
                                                                   CommandParameter="{Binding Source={x:Reference Name=TestSeries}}" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </StackPanel>

第四步。vm中添加图表图例点击命令（注意：本项目中安装了mvvmlight框架）

        /// <summary>
        /// 图表图例点击命令
        /// </summary>
        public ICommand LegendClickCmd
        {
            get
            {
                return new RelayCommand<LineSeries>(l =>
                {
                    switch (l.Visibility)
                    {
                        case Visibility.Visible:
                            l.Visibility = Visibility.Hidden;
                            break;

                        case Visibility.Hidden:
                            l.Visibility = Visibility.Visible;
                            break;

                        case Visibility.Collapsed:
                            break;

                        default:
                            l.Visibility = Visibility.Visible;
                            break;
                    }
                });
            }
        }

第五步。效果

 

来源：oschina

链接：https://my.oschina.net/u/4399154/blog/4924754