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;
                    }
                });
            }
        }

第五步。效果