图表使用Xamarin.Forms - Microcharts App，问题点注意使用的版本0.6.0或者0.6.1 转载https://www.c-sharpcorner.com/article/...

Xamarin.Forms - Microcharts App

In this article, we are going to learn how to display micro-charts in single line code for Xamarin.Forms.

• 
• Logesh Palani
• Dec 11 2017

• 3
• 21
• 28.7k

• facebook
• twitter
• linkedIn
• Reddit
• WhatsApp
• • Email
  • Bookmark
  • Print
  • Other Artcile
• Expand

MicrochartsApp.zip

Download Free .NET & JAVA Files API

Introduction

Displaying charts in mobile apps has always been a great way to offer users a clear overview of numerical data. I want this task to be as easy as writing a few lines of code, but I couldn't find a straight-forward way to achieve this. This is why I started exploring SkiaSharp and created Microcharts.

 

nuGet package : Xamarin.Forms = search "Microcharts.Forms"

   

This simple plugin can display microcharts in Xamarin.Forms.

 

 

Available charts Microcharts.Forms Plugin

• Barchart
• PointChart
• LineChart
• DonutChart
• RadialGaugeChart
• RadarChart

Chart Types

BarChart

1.  Chartview.Chart =  new BarChart(){Entries = entries}; 
   

 

 

PointChart

1. Chartview.Chart =  new PointChart(){Entries = entries}; 
   

 

LineChart

1. Chartview.Chart =  new LineChart(){Entries = entries}; 
   

 

DonutChart

1. Chartview.Chart =  new DonutChart(){Entries = entries}; 
   

 

RadialGaugeChart

1. Chartview.Chart =  new RadialGaugeChart(){Entries = entries}; 
   

 

RadarChart

1. Chartview.Chart =  new RadartChart(){Entries = entries}; 
   

 

 

Step 1

You can create Xamarin.Forms app by going to File >> New >> Visual C# >> Cross Platform >> Cross Platform App (Xamarin.Native or Xamarin.Forms), give the application name and press OK.

(Project name: MicrochartsApp)

 

Step 2

Now, add the following NuGet Package for your projects.

• Microcharts.Forms
  
  For that, go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for the Solution". Now, select the following NuGet Package, select your project, and install it.

• Microcharts.Forms
  
     

Step 3

To display a chart, we'll need to host it in a ChartView.

      

After installing NuGet packages, add a ChartView control to your project. For that, go to Solution Explorer >> MicrochartsApp(PCL) >>> Double-click on MainPage.xaml. After opening this, you can add assembly and XAML code to your project. Here is the code for this page.

 

Assembly

1. xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"   

XAML code

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.              xmlns:local="clr-namespace:MicrochartsApp"  
5.              x:Class="MicrochartsApp.MainPage"  
6.              xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms">  
7.     <ScrollView>   
8.         <StackLayout Orientation="Vertical">  
9.           
10.         <forms:ChartView x:Name="Chart1"  
11.                                HeightRequest="150"/>  
12.         <forms:ChartView x:Name="Chart2"  
13.                                HeightRequest="150"  
14.                              />  
15.         <forms:ChartView x:Name="Chart3"  
16.                              HeightRequest="150"/>  
17.         <forms:ChartView x:Name="Chart4"  
18.                              HeightRequest="150"/>  
19.         <forms:ChartView x:Name="Chart5"  
20.                              HeightRequest="150"/>  
21.         <forms:ChartView x:Name="Chart6"  
22.                          HeightRequest="160"/>  
23.         </StackLayout>  
24.     </ScrollView>  
25.   
26.   
27.   
28. </ContentPage>   

 

 

Step 4

In this step, add data entries. For that, open Solution Explorer >> MicrochartsApp(PCL) >>click open MainPage.xaml.cs. This class code is given below.

Every chart displays via Microcharts and consumes a set of data entries. They will always have the same structure regardless of the chart type that you want to display.

 

Each entry

•  Floating number representing it's value is required.
•  Label - what your entry is associated with.
•  ValueLabel - format your value
•  Color - entry

1. using Microcharts;  
2. using SkiaSharp;  
3. using Microcharts.Forms;  
4. using System;  
5. using System.Collections.Generic;  
6. using System.Linq;  
7. using System.Text;  
8. using System.Threading.Tasks;  
9. using Xamarin.Forms;  
10. using Entry = Microcharts.Entry;  
11.   
12.   
13. namespace MicrochartsApp  
14. {  
15.     public partial class MainPage : ContentPage  
16.     {  
17.         List<Entry> entries = new List<Entry>  
18.         {  
19.             new Entry(200)  
20.             {  
21.                 Color=SKColor.Parse("#FF1943"),  
22.                 Label ="January",  
23.                 ValueLabel = "200"  
24.             },  
25.             new Entry(400)  
26.             {  
27.                 Color = SKColor.Parse("00BFFF"),  
28.                 Label = "March",  
29.                 ValueLabel = "400"  
30.             },  
31.             new Entry(-100)  
32.             {  
33.                 Color =  SKColor.Parse("#00CED1"),  
34.                 Label = "Octobar",  
35.                 ValueLabel = "-100"  
36.             },  
37.             };  
38.         public MainPage()  
39.         {  
40.             InitializeComponent();  
41.   
42.               
43.             Chart1.Chart = new RadialGaugeChart() { Entries = entries };  
44.             Chart2.Chart = new LineChart() { Entries = entries };  
45.             Chart3.Chart = new DonutChart() { Entries = entries };  
46.             Chart4.Chart = new BarChart() { Entries = entries };  
47.             Chart5.Chart = new PointChart() { Entries = entries };  
48.             //Chart6.Chart = new RadarChart() { Entries = entries };  
49.         }  
50.     }  
51. } 
    

Step 5

Now, go to "Build" menu and configure your startup project. After configuring, run your project. You will have the result like below.

 

 

Finally, we have successfully created Xamarin.Forms Microcharts application.

• Microcharts App
• Xamarin
• Xamarin.Forms

Logesh Palani

https://logeshpalani.blogspot.com/

• 278
• 669.7k
• 1

Don’t miss Logesh Palani’s next article

Logesh Palani

278 6.8k 669.7k

+ Follow

View Previous Comments

• 3
• 21

Press Esc key to cancel

 

Hi all, is it possible with microchart to do a real time chart ?

May 31, 2019 florent SERFAS

1805 7 0

• 0
• 1
• Reply

Sure. Just Bind the real time data, its works

Jun 02, 2019 Logesh Palani

278 6.8k 669.7k

• 0

Hi all,how to get label value by clicking on that.i mean do we have any click event for label?.i need to navigate to another page when i click on that valuelabel

Feb 13, 2019 divya morampudi

1805 7 0

• 0
• 1
• Reply

You just use Tapped gesture event to navigate or perform operations

May 22, 2019 Logesh Palani

278 6.8k 669.7k

• 0

Copied from https://www.youtube.com/watch?v=tmymWdmf1y4&list=PLpbcUe4chE794tJySgk0EiqSWp4o2yFdY&index=6 :)

Jan 14, 2019 Ajithkumar J

280 6.7k 392.6k

• 1
• 0
• Reply

Is it possible in Visual studio 2017 professional

Jan 04, 2019 satya m

1657 155 1.5k

• 1
• 1
• Reply

You can use any version of visual studio but need to want your Xamarin.Forms version

May 22, 2019 Logesh Palani

278 6.8k 669.7k

• 0

Hi, can this charts do live updates?

Dec 05, 2018 Terry Chen

1810 2 0

• 0
• 1
• Reply

Yes It can

Jan 24, 2019 Sandeep Kumar

415 4.3k 522.8k

• 0

I did try already, but this didnt work buddy

Aug 22, 2018 SHRUTI SHARMA

1797 15 0

• 0
• 2
• Reply

What the problem you are facing ? Can you please describe here regarding the problem which you are facing. For reference regarding the problem u can refer the below link

Jan 24, 2019 Sandeep Kumar

415 4.3k 522.8k

• 0

Https://github.com/aloisdeniel/Microcharts

Jan 24, 2019 Sandeep Kumar

415 4.3k 522.8k

• 0

Hi can you let us know how to reduce diameter of pie chart

Aug 21, 2018 SHRUTI SHARMA

1797 15 0

• 0
• 1
• Reply

Edit your height and width request <forms:ChartView x:Name="Chart6" HeightRequest="160"/>

Aug 22, 2018 Logesh Palani

278 6.8k 669.7k

• 0

Hi, Can u pls suggest how to implement two bar chart?

Aug 21, 2018 Maitri Palkhiwala

1802 10 0

• 0
• 2
• Reply

Maitri Palkhiwala you can use various values to use no.of Bar Chart's [Code ] - Chart.Chart = new BarChart() { Entries = entries };

Aug 21, 2018 Logesh Palani

278 6.8k 669.7k

• 0

Thanks for Reply.. But I have a need for dual bar chart(two series..)

Aug 22, 2018 Maitri Palkhiwala

1802 10 0

• 0

Hi, Can u explain how to implement tap event in microcharts and how to work with dynamic data too

Dec 25, 2017 Sandeep Kumar

415 4.3k 522.8k

• 0
• 2
• Reply

Https://github.com/aloisdeniel/Microcharts/tree/develop?files=1

Dec 25, 2017 Logesh Palani

278 6.8k 669.7k

• 0

They have not used the tap event at all...

Jan 24, 2019 Sandeep Kumar

415 4.3k 522.8k

• 0

Wow nice article bro..

Dec 11, 2017 Ravishankar Velladurai

259 7.2k 500.6k

• 1
• 0
• Reply

转载于:https://www.cnblogs.com/dingling275445130/p/11341699.html