ラインマーカー

FlexChart のラインマーカーは、ラベルの付いた水平線または垂直線をプロット上にドラッグすることによって、チャートの特定の位置の正確なデータ値を表示します。これは、大量のデータを折れ線グラフまたは面グラフで表している場合や、複数の系列のデータを 1 つのラベルに表示したい場合に便利です。Drag や Move などの組み込みのインタラクションにより、ラインマーカーをドラッグしてチャート上のデータポイントをより正確に選択できます。

ラインマーカーの IsVisible プロパティを設定することで、チャートにラインマーカーを表示するかどうかを切り替えることができます。

以下のコード例は、C# および XAML でこれらのプロパティを設定する方法を示します。これらの例では、「外観のカスタマイズ」のセクションで作成したサンプルを使用しています。

C# のコード

FlexChart コントロールにラインマーカーを表示するには QuickStart クラスに次のコードを追加します。

C#	コードのコピー
Label lbl = new Label(); lbl.SetBinding(Label.TextProperty,new Binding{Path="[0].ValueX"}); Label sales = new Label(); sales.SetBinding(Label.TextProperty, new Binding { Path = "[0].Value" }); Label expenses = new Label(); expenses.SetBinding(Label.TextProperty, new Binding { Path = "[1].Value" }); StackLayout stc = new StackLayout { Children = {lbl, sales, expenses} }; chart.LineMarker.Content = stc; chart.LineMarker.IsVisible = true; chart.LineMarker.Interaction = Xuni.Forms.FlexChart.Enums.ChartMarkerInteraction.Drag; chart.LineMarker.Alignment = Xuni.Forms.FlexChart.Enums.ChartMarkerAlignment.Auto; chart.LineMarker.VerticalPosition = 1d; chart.LineMarker.Lines = Xuni.Forms.FlexChart.Enums.ChartMarkerLines.Vertical;

コードのコピー

Label lbl = new Label();
lbl.SetBinding(Label.TextProperty,new Binding{Path="[0].ValueX"});
Label sales = new Label();
sales.SetBinding(Label.TextProperty, new Binding { Path = "[0].Value" });
Label expenses = new Label();
expenses.SetBinding(Label.TextProperty, new Binding { Path = "[1].Value" });
StackLayout stc = new StackLayout
  {
    Children = {lbl, sales, expenses}
   };
chart.LineMarker.Content = stc;
chart.LineMarker.IsVisible = true;
chart.LineMarker.Interaction = Xuni.Forms.FlexChart.Enums.ChartMarkerInteraction.Drag;
chart.LineMarker.Alignment = Xuni.Forms.FlexChart.Enums.ChartMarkerAlignment.Auto;
chart.LineMarker.VerticalPosition = 1d;
chart.LineMarker.Lines = Xuni.Forms.FlexChart.Enums.ChartMarkerLines.Vertical;

XAML のコード

XAML でラインマーカーをカスタマイズするには、以下に示すように、Xuni.Forms.ChartCore アセンブリへの参照を設定します。

XAML	コードのコピー
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Forms.FlexChart;assembly=Xuni.Forms.FlexChart" xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore">

XAML

コードのコピー

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:xuni="clr-namespace:Xuni.Forms.FlexChart;assembly=Xuni.Forms.FlexChart"
xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore">

以下のようなチャートのラインマーカーをカスタマイズするマークアップを FlexChart コントロールのマークアップ内に追加します。

XAML	コードのコピー
<xuni:FlexChart x:Name="flexChart" ChartType="LineSymbols" BindingX="Name" VerticalOptions="FillAndExpand" ShowTooltips="True"> <xuni:FlexChart.Series> <xuni:ChartSeries Binding="Sales" Name="Sales" /> <xuni:ChartSeries Binding="Expenses" Name="Expenses" /> <xuni:ChartSeries Binding="Downloads" Name="Downloads" /> </xuni:FlexChart.Series> <xuni:FlexChart.LineMarker> <xuni:ChartLineMarker Lines="Vertical" VerticalPosition="1" Alignment="Auto" IsVisible="true" Interaction="Drag"> <xuni:ChartLineMarker.Content> <StackLayout> <Label Text="{Binding [0].ValueX}" /> <Label Text="{Binding [0].Value}" /> <Label Text="{Binding [1].Value}" /> </StackLayout> </xuni:ChartLineMarker.Content> </xuni:ChartLineMarker> </xuni:FlexChart.LineMarker> </xuni:FlexChart>

XAML

コードのコピー

<xuni:FlexChart x:Name="flexChart" ChartType="LineSymbols" 
                BindingX="Name" VerticalOptions="FillAndExpand" 
                ShowTooltips="True">
    <xuni:FlexChart.Series>
        <xuni:ChartSeries Binding="Sales" Name="Sales" />
        <xuni:ChartSeries Binding="Expenses" Name="Expenses" />
        <xuni:ChartSeries Binding="Downloads" Name="Downloads" />
    </xuni:FlexChart.Series>
    <xuni:FlexChart.LineMarker>
        <xuni:ChartLineMarker Lines="Vertical" 
              VerticalPosition="1" Alignment="Auto" 
              IsVisible="true" Interaction="Drag">
            <xuni:ChartLineMarker.Content>
                <StackLayout>
                    <Label Text="{Binding [0].ValueX}" />
                    <Label Text="{Binding [0].Value}" />
                    <Label Text="{Binding [1].Value}" />
                </StackLayout>
            </xuni:ChartLineMarker.Content>
        </xuni:ChartLineMarker>
    </xuni:FlexChart.LineMarker>
</xuni:FlexChart>