Гистограмма / Линейная диаграмма с несколькими записями в формах Xamarin - PullRequest
Новая
       55

Гистограмма / Линейная диаграмма с несколькими записями в формах Xamarin

0 голосов
/ 10 января 2019

Я должен реализовать линейную диаграмму и гистограмму с несколькими записями данных в Xamarin. В формах я видел несколько плагинов, таких как Microcharts, но я думаю, что не позволяет использовать несколько записей и Syncfusion, который предоставляет это, но не является бесплатным. Любой бесплатный плагин, чтобы сделать это?

Пример графиков:

Гистограмма

Линейный

1 Ответ

0 голосов
/ 11 января 2019

В зависимости от ваших требований, вы можете использовать PlotView для этого. Прежде чем использовать его, пожалуйста, обратитесь к следующей ссылке для инициализации OxyPlot,

http://docs.oxyplot.org/en/latest/getting-started/hello-xamarin-forms.html

Я написал демо, вы можете сослаться на него.

Скриншот гистограммы

enter image description here

Код гистограммы 

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarGraphsDemo : ContentPage
{
    private PlotView _opv = new PlotView();
    public BarGraphsDemo ()
{
InitializeComponent ();

        var plotModel = new PlotModel { Title = "OxyPlot Demo" };
        CategoryAxis xaxis = new CategoryAxis();
        xaxis.Position = AxisPosition.Bottom;
        xaxis.MajorGridlineStyle = LineStyle.Solid;
        xaxis.MinorGridlineStyle = LineStyle.Dot;
        xaxis.Labels.Add("2/2010");
        xaxis.Labels.Add("2/2011");
        xaxis.Labels.Add("2/2012");
        xaxis.Labels.Add("2/2013");

        ColumnSeries s1 = new ColumnSeries();
        s1.IsStacked = false;
        s1.Items.Add(new ColumnItem(1.2));
        s1.Items.Add(new ColumnItem(1.6));
        s1.Items.Add(new ColumnItem(1.4));
        s1.Items.Add(new ColumnItem(1.5));

        ColumnSeries s2 = new ColumnSeries();
        s2.IsStacked = false;
        s2.Items.Add(new ColumnItem(1.5));
        s2.Items.Add(new ColumnItem(1.6));
        s2.Items.Add(new ColumnItem(1.1));
        s2.Items.Add(new ColumnItem(1.2));

        ColumnSeries s3 = new ColumnSeries();
        s3.IsStacked = false;
        s3.Items.Add(new ColumnItem(1.2));
        s3.Items.Add(new ColumnItem(1.3));
        s3.Items.Add(new ColumnItem(1.4));
        s3.Items.Add(new ColumnItem(1.5));

        ColumnSeries s4 = new ColumnSeries();
        s4.IsStacked = false;
        s4.Items.Add(new ColumnItem(1.5));
        s4.Items.Add(new ColumnItem(1.4));
        s4.Items.Add(new ColumnItem(1.3));
        s4.Items.Add(new ColumnItem(1.2));



        plotModel.Series.Add(s1);
        plotModel.Series.Add(s2);
        plotModel.Series.Add(s3);
        plotModel.Series.Add(s4);

        plotModel.Axes.Add(xaxis);
        plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });

        _opv.Model = plotModel;
        Content = _opv;
    }

} Линейный скриншот

enter image description here

Линейный код 

   public partial class MainPage : ContentPage
{
    private PlotView _opv = new PlotView();

    public MainPage()
    {
        InitializeComponent();

        var Points = new List<DataPoint>
        {
            //DateTimeAxis.ToDouble(new DateTime(1989, 10, 3)), 8)
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.75)
        };
        var Points2 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.15),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.9)
        };
        var Points3 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.5),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.6),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.41),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.42)
        };
        var Points4 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.57)
        };


        var m = new PlotModel();
        m.PlotType = PlotType.XY;
        m.InvalidatePlot(false);

        m.Title = "hello oxy";


        var startDate = DateTime.Now.AddMonths(-3);
        var endDate = DateTime.Now;

        var minValue = DateTimeAxis.ToDouble(startDate);
        var maxValue = DateTimeAxis.ToDouble(endDate);
        m.Axes.Add(new DateTimeAxis { Position = AxisPosition.Bottom, Minimum = minValue, Maximum = maxValue, StringFormat = "MMM/yyyy" });
        m.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });
        m.ResetAllAxes();

        var ls1 = new LineSeries();
        var ls2 = new LineSeries();
        var ls3 = new LineSeries();
        var ls4 = new LineSeries();
        //MarkerType = OxyPlot.MarkerType.Circle,
        ls1.MarkerType = OxyPlot.MarkerType.Circle;
        ls2.MarkerType = OxyPlot.MarkerType.Circle;
        ls3.MarkerType = OxyPlot.MarkerType.Circle;
        ls4.MarkerType = OxyPlot.MarkerType.Circle;
        ls1.ItemsSource = Points;
        ls2.ItemsSource = Points2;
        ls3.ItemsSource = Points3;
        ls4.ItemsSource = Points4;

        m.Series.Add(ls1);
        m.Series.Add(ls2);
        m.Series.Add(ls3);
        m.Series.Add(ls4);
        _opv = new PlotView
        {
            WidthRequest = 300,
            HeightRequest = 300,
            BackgroundColor = Color.White,

        };
        _opv.Model = m;
        Content = _opv;
    }

Если вы хотите узнать больше информации о PlotView, вы можете обратиться по этой ссылке. http://docs.oxyplot.org/en/latest/introduction/index.html

...