问题
I must implement a linear and a bar chart whit multiple data entries in Xamarin.Forms, I have seen multiple plugins like Microcharts but I think that doesn't afford multiple entries and Syncfusion which affords it but is not free. Any free plugin to do it?
Example of the charts:
Bar Chart
Linear
回答1:
Based on your demand, You could use PlotView to achieve that .Before you used it, please refer to following link to initialize the OxyPlot,
http://docs.oxyplot.org/en/latest/getting-started/hello-xamarin-forms.html
I wrote a demo, you could refer to it.
Bar Chart screenshot
Bar Chart code
[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;
}
} Linear screenshot
Linear code
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;
}
If you want to know more details about PlotView, you could refer to this link. http://docs.oxyplot.org/en/latest/introduction/index.html
来源：https://stackoverflow.com/questions/54132725/bar-linear-chart-with-multiple-entries-in-xamarin-forms