XamarinでOxyPlotでグラフを描いた（その２）

前回のグラフをちょっと改造。

Y軸の血圧の背景に固定のラインを表示して、ZoomとかPanでデータを取得するようにした。

Y軸に固定のグリッドラインを表示する。

LinearAxisにExtraGridlinesを指定すると固定の線を引いてくれるが、色が１つしか指定できないのでLinearAxisをもう一つ追加し、

動かしたときにLinearAxisが離れちゃうので、AxisChangedでMaximum、Minimumをセットして同期するようにした。

var axisY = new LinearAxis()
{
    Title = "血圧",
    IsZoomEnabled = false,
    Position = AxisPosition.Left,
    Maximum = 150,
    Minimum = 50,
    MajorStep = 10,
    MajorGridlineStyle = LineStyle.Solid,
    MinorGridlineStyle = LineStyle.Dot,           
    ExtraGridlines = new double[] {80,81,82,83,84,130,131,132,133,134},
    ExtraGridlineThickness = 3,
    ExtraGridlineColor = OxyColors.SkyBlue,
};
model.Axes.Add(axisY);

// 固定グリッドライン２ 
var axisY2 = new LinearAxis()
{
    IsZoomEnabled = false,
    MajorTickSize = 0,
    MinorTickSize =0,
    Maximum = 150,
    Minimum = 50,
    TextColor = OxyColors.Transparent,
    Position = AxisPosition.Left,
    ExtraGridlines = new double[] { 76, 77, 78, 79, 126, 127, 128, 129},
    ExtraGridlineThickness = 3,
    ExtraGridlineColor = OxyColors.LightSkyBlue,
};
model.Axes.Add(axisY2);

// グリッドを同期させる
axisY.AxisChanged += (s, ea) =>
{
    axisY2.Maximum = axisY.ActualMaximum;
    axisY2.Minimum = axisY.ActualMinimum;

    PlotModelPressure.InvalidatePlot(true);
};

var axisY = new LinearAxis()

{

Title = "血圧",

IsZoomEnabled = false,

Position = AxisPosition.Left,

Maximum = 150,

Minimum = 50,

MajorStep = 10,

MajorGridlineStyle = LineStyle.Solid,

MinorGridlineStyle = LineStyle.Dot,

ExtraGridlines = new double[] {80,81,82,83,84,130,131,132,133,134},

ExtraGridlineThickness = 3,

ExtraGridlineColor = OxyColors.SkyBlue,

};

model.Axes.Add(axisY);

// 固定グリッドライン２

var axisY2 = new LinearAxis()

{

IsZoomEnabled = false,

MajorTickSize = 0,

MinorTickSize =0,

Maximum = 150,

Minimum = 50,

TextColor = OxyColors.Transparent,

Position = AxisPosition.Left,

ExtraGridlines = new double[] { 76, 77, 78, 79, 126, 127, 128, 129},

ExtraGridlineThickness = 3,

ExtraGridlineColor = OxyColors.LightSkyBlue,

};

model.Axes.Add(axisY2);

// グリッドを同期させる

axisY.AxisChanged += (s, ea) =>

{

axisY2.Maximum = axisY.ActualMaximum;

axisY2.Minimum = axisY.ActualMinimum;

PlotModelPressure.InvalidatePlot(true);

};

凡例を表示

LineSeriesにTitleをRenderInLegend=trueを設定すると凡例が表示される。

// 最高血圧
var seriesMax = new LineSeries()
{
    Title = "最高血圧",
    ItemsSource = BloodList,
    DataFieldX = "Date",
    DataFieldY = "Max",
    MarkerType = MarkerType.Circle,
    MarkerSize = 2,
    MarkerStroke = OxyColors.Red,
    MarkerStrokeThickness = 1,
    MarkerFill = OxyColors.Pink,
    Color = OxyColors.Red,
    StrokeThickness = 1,
    RenderInLegend  =true
};
model.Series.Add(seriesMax);

// 最低血圧
var seriesMin = new LineSeries()
{
    Title = "最低血圧",
    ItemsSource = BloodList,
    DataFieldX = "Date",
    DataFieldY = "Min",
    MarkerType = MarkerType.Circle,
    MarkerSize = 2,
    MarkerStroke = OxyColors.Blue,
    MarkerStrokeThickness = 1,
    MarkerFill = OxyColors.SkyBlue,
    Color = OxyColors.Blue,
    StrokeThickness = 1,
    RenderInLegend = true
};
model.Series.Add(seriesMin);

// 最高血圧

var seriesMax = new LineSeries()

{

Title = "最高血圧",

ItemsSource = BloodList,

DataFieldX = "Date",

DataFieldY = "Max",

MarkerType = MarkerType.Circle,

MarkerSize = 2,

MarkerStroke = OxyColors.Red,

MarkerStrokeThickness = 1,

MarkerFill = OxyColors.Pink,

Color = OxyColors.Red,

StrokeThickness = 1,

RenderInLegend =true

};

model.Series.Add(seriesMax);

// 最低血圧

var seriesMin = new LineSeries()

{

Title = "最低血圧",

ItemsSource = BloodList,

DataFieldX = "Date",

DataFieldY = "Min",

MarkerType = MarkerType.Circle,

MarkerSize = 2,

MarkerStroke = OxyColors.Blue,

MarkerStrokeThickness = 1,

MarkerFill = OxyColors.SkyBlue,

Color = OxyColors.Blue,

StrokeThickness = 1,

RenderInLegend = true

};

model.Series.Add(seriesMin);

いい感じ。

ZoomとPanで追加データを取得

日付の枠（DateTimeAxis）のイベントAxisChangedでデータを取得する

：

var axisX = new DateTimeAxis()
{
    Title = "日付",
    Position = AxisPosition.Bottom,
    Maximum = maxDate,
    Minimum = minDate,
    MajorGridlineStyle = LineStyle.Solid,
    MinorGridlineStyle = LineStyle.Dot,                               
};
axisX.AxisChanged += AxisX_AxisChanged;

：

var axisDateWeight = new DateTimeAxis()
{
    Title = "日付",
    Position = AxisPosition.Bottom,
    Maximum = maxDate,
    Minimum = minDate,
    MajorGridlineStyle = LineStyle.Solid,
    MinorGridlineStyle = LineStyle.Dot,
};
axisDateWeight.AxisChanged += AxisX_AxisChanged;

：

private void AxisX_AxisChanged(object sender, AxisChangedEventArgs e)
{
    var axis = sender as DateTimeAxis;

    // 後の日付データを取得
    if (BloodList.Max(x => x.Date) < DateTimeAxis.ToDateTime(axis.ActualMaximum))
    {
        var list = _DBManager.ReadSync(BloodList.Max(x => x.Date).AddDays(1), DateTimeAxis.ToDateTime(axis.ActualMaximum));
        if (list != null)
        {
            foreach (var s in list)
            {
                BloodList.Add(s);
            }
        }
    }

    // 前の日付データを取得
    if (BloodList.Min(x => x.Date) > DateTimeAxis.ToDateTime(axis.ActualMinimum))
    {
        var list = _DBManager.ReadSync(DateTimeAxis.ToDateTime(axis.ActualMinimum), BloodList.Min(x => x.Date).AddDays(-1));
        if (list != null)
        {
            foreach (var s in list.OrderByDescending(x => x.Date))
            {
                BloodList.Insert(0, s);
            }
        }
    }

    // 血圧と体重の日付を同期
    if (axis == PlotModelPressure.Axes[0])
    {
        PlotModelWeight.Axes[0].Maximum = axis.ActualMaximum;
        PlotModelWeight.Axes[0].Minimum = axis.ActualMinimum;
    }
    else if (axis == PlotModelWeight.Axes[0])
    {
        PlotModelPressure.Axes[0].Maximum = axis.ActualMaximum;
        PlotModelPressure.Axes[0].Minimum = axis.ActualMinimum;
    }

    // 再描画
    PlotModelPressure.InvalidatePlot(true);
    PlotModelWeight.InvalidatePlot(true);
}

：

var axisX = new DateTimeAxis()

{

Title = "日付",

Position = AxisPosition.Bottom,

Maximum = maxDate,

Minimum = minDate,

MajorGridlineStyle = LineStyle.Solid,

MinorGridlineStyle = LineStyle.Dot,

};

axisX.AxisChanged += AxisX_AxisChanged;

：

var axisDateWeight = new DateTimeAxis()

{

Title = "日付",

Position = AxisPosition.Bottom,

Maximum = maxDate,

Minimum = minDate,

MajorGridlineStyle = LineStyle.Solid,

MinorGridlineStyle = LineStyle.Dot,

};

axisDateWeight.AxisChanged += AxisX_AxisChanged;

：

private void AxisX_AxisChanged(object sender, AxisChangedEventArgs e)

{

var axis = sender as DateTimeAxis;

// 後の日付データを取得

if (BloodList.Max(x => x.Date) < DateTimeAxis.ToDateTime(axis.ActualMaximum))

{

var list = _DBManager.ReadSync(BloodList.Max(x => x.Date).AddDays(1), DateTimeAxis.ToDateTime(axis.ActualMaximum));

if (list != null)

{

foreach (var s in list)

{

BloodList.Add(s);

}

// 前の日付データを取得

if (BloodList.Min(x => x.Date) > DateTimeAxis.ToDateTime(axis.ActualMinimum))

{

var list = _DBManager.ReadSync(DateTimeAxis.ToDateTime(axis.ActualMinimum), BloodList.Min(x => x.Date).AddDays(-1));

if (list != null)

{

foreach (var s in list.OrderByDescending(x => x.Date))

{

BloodList.Insert(0, s);

}

// 血圧と体重の日付を同期

if (axis == PlotModelPressure.Axes[0])

{

PlotModelWeight.Axes[0].Maximum = axis.ActualMaximum;

PlotModelWeight.Axes[0].Minimum = axis.ActualMinimum;

}

else if (axis == PlotModelWeight.Axes[0])

{

PlotModelPressure.Axes[0].Maximum = axis.ActualMaximum;

PlotModelPressure.Axes[0].Minimum = axis.ActualMinimum;

}

// 再描画

PlotModelPressure.InvalidatePlot(true);

PlotModelWeight.InvalidatePlot(true);

}

できた。(∩´∀｀)∩

アンドロイド版もほぼ同じだな。

減量の成果が見て取れる。(´～｀ヾ)

が、片方のグラフを動かした後、もう片方のグラフを動かすと同期しなくなるのはなんでだろう。。。(´ヘ｀;)　う～ん・・・

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

blog

XamarinでOxyPlotでグラフを描いた（その２）

Y軸に固定のグリッドラインを表示する。

凡例を表示

ZoomとPanで追加データを取得

いいね:

XamarinでOxyPlotでグラフを描いた（その２）

Y軸に固定のグリッドラインを表示する。

凡例を表示

ZoomとPanで追加データを取得

共有:

いいね: