1. Location:
  2. / Computer learning >> Datamaskin læring >> Kunnskap om programmering >> Mobil Utvikling >>

Legg Charts til din Android App Bruke MPAndroidChart

Add Charts til din Android App Bruke MPAndroidChart
39
Del
4
Del
Dette cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Hvis appen avtaler med en rekke data, ved hjelp av diagrammer i stedet for tabeller for å vise at data kan føre til en langt bedre brukeropplevelse. I denne opplæringen, skal du lære om en populære åpen kildekode kartlegging bibliotek MPAndroidChart. Figurene i dette biblioteket er svært lett å tilpasse, interaktiv, og enkelt å lage.

Forutsetninger

Sørg for at du har den nyeste versjonen av Android Studio installert. Du kan få det fra Android Developer nettstedet.

1. Legge MPAndroidChart et prosjekt

For å bruke dette biblioteket i Android-prosjektet, er alt du trenger å gjøre:


    Last ned den nyeste versjonen av biblioteket fra Github. I skrivende stund er den nyeste versjonen 1.7.4.
  1. Kopier mpandroidchartlibrary-1-7-4.jar til prosjektets libs katalogen.
  2. I Android Studio, høyreklikk på JAR filen og velg Legg til som bibliotek.

    2. Opprette et datasett

    Alle data skal omgjøres til et datasett objekt før det kan brukes av et diagram. Ulike typer tabeller bruker forskjellige underklasser av DataSet klassen. For eksempel bruker en Søylediagram en BarDataSet eksempel. På samme måte bruker en piechart en PieDataSet eksempel.
    I stedet for bare å håndtere tilfeldige tall for å generere en prøve diagram, la oss vurdere en hypotetisk scenario. Alice og Bob er venner. Alice kaller Bob flere ganger i måneden for å vite hva han driver med. Bob gjør et notat når hun kaller ham.

    I denne veiledningen bruker vi Bobs notater for å lage et diagram for å vise hvor mange ganger Alice kalt Bob. Her er hva Bob har notert seg:
    Måneds
    Antall samtaler
    January4February8March6April12May18June9

    Et stolpediagram virker perfekt for denne type data. For å vise data i et diagram, må vi opprette en BarDataSet eksempel. Du kan følge de samme trinnene for å opprette forekomster av andre undergrupper av datasett.

    Hver enkelt verdi av rådata bør være representert som en oppføring. En Arraylist av slike Entry gjenstander brukes til å opprette et datasett. La oss lage noen BarEntry gjenstander og legge dem til en Arraylist:
    Arraylist < BarEntry > oppføringer = new Arraylist < > (); entries.add (ny BarEntry (4f, 0)); entries.add (ny BarEntry (8F, 1)); entries.add (ny BarEntry (6f, 2)); oppføringer .Legg (ny BarEntry (12f, 3)); entries.add (ny BarEntry (18f, 4)); entries.add (ny BarEntry (9f, 5));

    nå som Arraylist of Entry objekter er klar kan vi skape et datasett ut av det:
    BarDataSet datasett = nye BarDataSet (oppføringene, "# of Calls");
    3. Definere x-aksen etiketter

    Vi har allerede lagt flere verdier til vår diagrammet, men de vil ikke gjøre mye fornuftig for brukeren med mindre vi gir dem meningsfulle etiketter. Hver x-aksen etiketten er representert ved hjelp av en streng og en Arraylist brukes til å lagre alle etikettene
    Arraylist. ≪ String > etiketter = new Arraylist < String > (); labels.add ( "januar"); labels.add ( "februar"); labels.add ( "Mars"); labels.add ( "April"); labels.add ( "May"); labels.add ( "June");
    4. Opprette et diagram

    Alle diagrammer av dette biblioteket er subklasser av ViewGroup, noe som betyr at du enkelt kan legge dem til en layout. Du kan definere diagrammet ved hjelp av en XML-fil eller Java-kode. Hvis diagrammet kommer til å ta opp hele skjermen på en aktivitet eller Fragment, deretter bruke Java-kode er enklere:
    Søylediagram diagram = new Søylediagram (kontekst), setContentView (diagram);

    Dette skaper en blank diagram uten noen data. La oss bruke datasettet og liste med etiketter vi opprettet i de foregående trinnene for å definere dette diagrams data
    BarData data = nye BarData (etiketter, datasettet),. Chart.setData (data);

    La oss også legge til en beskrivelse til diagrammet
    chart.setDescription ( "# ganger Alice heter Bob.");

    Hvis du nå kjøre appen på en Android-enhet, bør du være i stand til å se et søylediagram som ligner til den som er vist nedenfor. Figuren er interaktiv og svarer klype-to-zoom og dra gester.

    5. Bruke Color Maler

    Hvis du ikke liker standardfargene, kan du bruke DataSet klassens setColors metode for å endre fargevalget. Men MPAndroidChart kommer også med en rekke forhåndsdefinerte farge maler som lar deg endre utseendet til datasettet uten å måtte forholde seg til de enkelte fargeverdiene.

    I den gjeldende versjonen av dette biblioteket følgende maler er available:


    ColorTemplate.LIBERTY_COLORS

    ColorTemplate.COLORFUL_COLORS

    ColorTemplate.JOYFUL_COLORS

    ColorTemplate.PASTEL_COLORS

    ColorTemplate.VORDIPLOM_COLORS


    To knytte en farge mal med et datasett, må du bruke setColors metoden. Her er et eksempel:
    dataset.setColors (ColorTemplate.COLORFUL_COLORS);

    Kjør programmet ditt en gang for å se et diagram med mer levende farger

    6.. Legge Animasjoner

    Alle diagrammer av dette biblioteket støtte animasjoner, som du kan bruke til å lage diagrammer vises mer livlig. Den animateXY metoden brukes til å animere begge aksene i diagrammet. Hvis du ønsker å animere bare én av aksene, kan du bruke animateX eller animateY å animere x-aksen eller y-aksen henholdsvis. Du må angi varigheten (i millisekunder) av animasjon når du kaller disse metodene. For eksempel, for å bare animere y-aksen, legge inn følgende kode:
    chart.animateY (5000);
    7. Bruke Limit Lines

    Du kan legge til grenselinjer i et diagram til å legge mer mening i diagrammene. Limit linjer bare være fornuftig for enkelte typer diagrammer, som søylediagrammer, linjediagrammer og punktdiagrammer.

    I vårt eksempel, der Alice kaller Bob flere ganger i måneden, la oss si at Bob får irritert hvis Alice kaller ham mer enn ti ganger per måned. For å vise denne informasjonen, kan vi legge til en grense linje for denne verdien. Her er hvordan du gjør dette:
    LimitLine linje = new LimitLine (10f), data.addLimitLine (linje);
    8. Lagre Chart som et bilde

    MPAndroidChart lar deg også lagre den nåværende tilstand av et diagram som et bilde. For å bruke denne funksjonen, må du først gi appen tillatelse til å skrive til enhetens SD-kort. Du kan gjøre dette ved å legge til følgende kode i AndroidManifest.xml:
    < bruker-tillatelse android: name = "android.permission.WRITE_EXTERNAL_STORAGE" />

    Du har to metoder å velge mellom:


    saveToGallery Denne metoden sparer diagrammet som en JPEG-fil. Den lar deg også angi kvaliteten eller komprimering av bildet.

  3. saveToPath Denne metoden sparer diagrammet som en PNG-fil til banen du angir.

    For eksempel vil lagre diagrammet som en JPEG-fil, kan du bruke følgende kode:
    chart.saveToGallery ( "mychart.jpg", 85); //85 er kvaliteten på bildet
    Konklusjon

    I denne opplæringen, lærte du hvordan du bruker MPAndroidChart biblioteket for å lage diagrammer som er både behagelig og interaktiv. For å få til konsistensen, har jeg brukt søylediagrammer i denne opplæringen. Men du kan følge de samme trinnene for å lage andre typer diagrammer. Hvis du vil vite mer om dette biblioteket, oppfordrer jeg deg til å lese dokumentasjon og eksempler på Github.