Xamarin.Forms のドキュメント
ラインマーカー
コントロール > FlexChart > 機能 > ラインマーカー

ラインマーカーは、グラフプロットで描画され、軸上のある値にバインドされた線です。トレンドを表示したり、重要な値をグラフに表示するために使用することができます。ラベルの付いたプロット上の線を表示し、線グラフまたは面グラフに多数のデータがある場合や、複数のシリーズのデータを1つのラベルで表示する場合に便利です。ドラッグや移動などの組み込みのインタラクションを使用すると、ユーザーはラインマーカーをドラッグして、チャート上のデータポイントをより正確に選択できます。

InteractionプロパティをDragに設定する場合は、DragContentプロパティとDragLinesプロパティを設定して、ラインマーカー線にリンクした内容と値をドラッグ可能にするかどうかを指定する必要があります。

以下は、FlexChartでラインマーカーを表示する際に使用される主なプロパティです。

次の図は、ラインマーカーを表示したFlexChartを示します。

LineMarker

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

C# のコード

FlexChart コントロールのラインマーカーを表示するには、QuickStart.cs ファイルに次のコードを追加します。

C#
コードのコピー
 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.flexChart.ItemsSource = new LineMarkerViewModel().Items;
            initMarker();
        }
        StackLayout layout = new StackLayout();
        Label xLabel = new Label();
        IList<Label> yLabels = new List<Label>();
        private void initMarker()
        {
            xLabel.VerticalOptions = LayoutOptions.FillAndExpand;
            xLabel.HorizontalOptions = LayoutOptions.FillAndExpand;

            layout.Children.Add(xLabel);

            for (int index = 0; index < flexChart.Series.Count; index++)
            {
                var series = flexChart.Series[index];
                var fill = (int)((IChart)flexChart).GetColor(index);
                Label yLabel = new Label();
                yLabel.VerticalOptions = LayoutOptions.FillAndExpand;
                yLabel.HorizontalOptions = LayoutOptions.FillAndExpand;
                var bytes = BitConverter.GetBytes(fill);
                yLabel.TextColor = Color.FromRgba(bytes[2], bytes[1], bytes[0], bytes[3]);
                yLabels.Add(yLabel);
                layout.Children.Add(yLabel);
            }
            lineMarker.Content = layout;
        }
        private void OnLineMarkerPositionChanged(object sender, PositionChangedArgs e)
        {
            if (flexChart != null)
            {
                var info = flexChart.HitTest(new Point(e.Position.X, double.NaN));
                int pointIndex = info.PointIndex;
                xLabel.Text = string.Format("{0:dd-MM}", info.X);

                for (int index = 0; index < flexChart.Series.Count; index++)
                {
                    var series = flexChart.Series[index];
                    var value = series.GetValues(0)[pointIndex];

                    var fill = (int)((IChart)flexChart).GetColor(index);
                    string content = string.Format("{0} = {1}", series.SeriesName, string.Format("{0:f0}", value));
                    Label yLabel = yLabels[index];
                    yLabel.Text = content;
                }
            }
        }
        public class LineMarkerViewModel
        {
            const int Count = 300;
            Random rnd = new Random();

            public List<LineMarkerSampleDataItem> Items
            {
                get
                {
                    List<LineMarkerSampleDataItem> items = new List<LineMarkerSampleDataItem>();
                    DateTime date = new DateTime(2016, 1, 1);
                    for (var i = 0; i < Count; i++)
                    {
                        var item = new LineMarkerSampleDataItem()
                        {
                            Date = date.AddDays(i),
                            Input = rnd.Next(10, 20),
                            Output = rnd.Next(0, 10)
                        };
                        items.Add(item);
                    }
                    return items;
                }
            }
            public List<string> LineType
            {
                get
                {
                    return Enum.GetNames(typeof(LineMarkerLines)).ToList();
                }
            }
            public List<string> LineMarkerInteraction
            {
                get
                {
                    return Enum.GetNames(typeof(LineMarkerInteraction)).ToList();
                }
            }
        }
        public class LineMarkerSampleDataItem
        {
            public int Input { get; set; }
            public int Output { get; set; }
            public DateTime Date { get; set; }
        }
    }

XAML のコード

XAML
コードのコピー
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:chartFeatures"
             xmlns:c1="clr-namespace:C1.Xamarin.Forms.Chart;assembly=C1.Xamarin.Forms.Chart"
             xmlns:interaction="clr-namespace:C1.Xamarin.Forms.Chart.Interaction;assembly=C1.Xamarin.Forms.Chart"
             x:Name=""
             x:Class="chartFeatures.MainPage">
<StackLayout>
        <Grid  VerticalOptions="FillAndExpand">
            <c1:FlexChart x:Name="flexChart" ChartType="Line" BindingX="Date" VerticalOptions="FillAndExpand" ShowTooltip="False">
                <c1:FlexChart.Series>
                    <c1:ChartSeries Binding="Input" SeriesName="入力"/>
                    <c1:ChartSeries Binding="Output" SeriesName="出力"/>
                </c1:FlexChart.Series>
                <c1:FlexChart.AxisY>
                    <c1:ChartAxis MajorUnit="2" Position="Left" MajorGrid="True" AxisLine="False" MajorTickMarks="None" />
                </c1:FlexChart.AxisY>
                <c1:FlexChart.Layers>
                    <interaction:C1LineMarker x:Name="lineMarker"  DragContent="True" PositionChanged="OnLineMarkerPositionChanged">
                        <interaction:C1LineMarker.VerticalLineStyle>
                            <c1:ChartStyle Stroke="Gray" />
                        </interaction:C1LineMarker.VerticalLineStyle>
                        <interaction:C1LineMarker.HorizontalLineStyle>
                            <c1:ChartStyle Stroke="Gray" />
                        </interaction:C1LineMarker.HorizontalLineStyle>
                    </interaction:C1LineMarker>
                </c1:FlexChart.Layers>
            </c1:FlexChart>
        </Grid>
    </StackLayout>
</ContentPage>