Application et graphique pour smartphone

Si vous souhaitez afficher le graphique dans l'application Android MPAndroidChart La bibliothèque est souvent utilisée. (Il existe également une version iOS de ** Charts Library **)

C'est une excellente bibliothèque polyvalente et dotée d'une excellente interface utilisateur, En raison du manque d'informations japonaises, j'estime que la difficulté de mise en œuvre est assez élevée. Donc, ** j'ai créé un package supplémentaire pour créer facilement un graphique! ** ** Github

Vous pouvez facilement créer un graphique comme celui ci-dessous

(Le sujet est lourd! (Rires))

** Ce package est basé sur l'implémentation dans Kotlin, Si vous le souhaitez, je vais faire une version Java / Swift (iOS). Si vous avez d'autres questions ou demandes d'ajout de méthodes, n'hésitez pas à commenter! ** **

Comment rendre MPAndroidChart plus facile à utiliser?

J'ai eu du mal à créer une application qui incluait des graphiques avec MPAndroidChart dans les parties suivantes. ** 1. Création d'un graphique de série chronologique ** ** 2. Spécification du format (en particulier la couleur) ** ** 3. Créer des info-bulles ** ** 4. Il existe peu de documents japonais **

1. Création d'un graphique de série chronologique

[Les détails seront écrits dans le supplément](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#mpandroidchart%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B% E6% 99% 82% E7% B3% BB% E5% 88% 97% E3% 82% B0% E3% 83% A9% E3% 83% 95% E3% 81% AE% E4% BD% 9C% E3% 82% 8A% E6% 96% B9), la création d'un graphique de série chronologique nécessite des efforts considérables tels que le stockage des données et le formatage des axes.

Correspondance avec ce package

Nous avons créé une méthode dédiée aux graphiques de séries chronologiques afin de pouvoir les créer avec des opérations simples.

De plus, si l'heure n'est pas régulièrement espacée comme indiqué ci-dessous

        val x = listOf<Date>(
            sdf.parse("2020/09/01 00:00:00"),
            sdf.parse("2020/09/01 06:00:00"),
            sdf.parse("2020/09/01 12:00:00"),
            sdf.parse("2020/09/01 18:00:00"),
            sdf.parse("2020/09/02 00:00:00"),
            sdf.parse("2020/09/02 06:00:00"),
            sdf.parse("2020/09/02 12:00:00"),
            sdf.parse("2020/09/03 18:00:00"),//Seulement ici l'intervalle de temps s'envole
        )

Avec la méthode ci-dessus, il sera tracé à intervalles égaux en fonction uniquement des informations d'index. L'intervalle de temps n'est pas représenté avec précision sur l'axe horizontal.

Dans ce package, nous avons également préparé un mode d'affichage qui trace avec précision même si l'axe horizontal n'est pas régulièrement espacé. (Les étiquettes ne sont affichées qu'au début et à la fin)

2. Spécification du format de l'interface utilisateur

Dans MPAndroidChart, à peu près pour l'affichage graphique ** ① Processus de saisie des données ** ** ② Processus pour spécifier le format de l'interface utilisateur ** Deux types sont requis. Il est souhaitable du point de vue de l'indépendance que ces deux types de traitement puissent être spécifiés séparément dans le code.

Cependant, lorsque vous spécifiez plusieurs valeurs d'axe Y comme un graphique linéaire, Comme indiqué ci-dessous, il s'agira d'une méthode de spécification dans laquelle le traitement est compliqué en ① et ②.

        //Stockage des données dans Entry → ① Traitement de la saisie des données
        var entryList1 = mutableListOf<Entry>()//1ère ligne
        var entryList2 = mutableListOf<Entry>()//Deuxième ligne
        for(i in x.indices){
            entryList1.add(
                Entry(x[i], y1[i])
            )
            entryList2.add(
                Entry(x[i], y2[i])
            )
        }

        //Réglage de l'axe X → ② Traitement de la spécification du format de l'interface utilisateur
        lineChart.xAxis.apply {
            isEnabled = true
            textColor = Color.BLACK
        }
        //Réglage de l'axe Y gauche → ② Traitement de la spécification du format de l'interface utilisateur
        lineChart.axisLeft.apply {
            isEnabled = true
            textColor = Color.BLACK
        }
        //Réglage de l'axe Y droit → ② Traitement des spécifications du format de l'interface utilisateur
        lineChart.axisLeft.apply {
            isEnabled = false
        }

        //LineDataSet(Pour chaque ligne)Créer une liste de → ① Processus de saisie de données
        val lineDataSets = mutableListOf<ILineDataSet>()
        //Stockage des données pour la première ligne → ① Traitement de la saisie des données
        val lineDataSet1 = LineDataSet(entryList1, "linear")
        //Couleur de la première ligne → ② Traitement des spécifications du format UI
        lineDataSet1.color = Color.BLUE
        //Enregistrer dans la liste → ① Processus de saisie des données
        lineDataSets.add(lineDataSet1)
        //Stockage des données pour la deuxième ligne → ① Traitement de la saisie des données
        val lineDataSet2 = LineDataSet(entryList2, "square")
        //La couleur de la deuxième ligne → ② Traitement de la spécification du format de l'interface utilisateur
        lineDataSet2.color = Color.RED

        //Enregistrer la liste LineDataSet dans LineData → ① Traitement de la saisie des données
        lineDataSets.add(lineDataSet2)
        //Stockage des données dans LineChart → ① Traitement des entrées de données
        lineChart.data = LineData(lineDataSets)

Correspondance avec ce package

La méthode de spécification ci-dessus n'est pas préférable du point de vue de l'indépendance et de la lisibilité du code. ** - Classe de spécification du format de l'interface utilisateur (Chart et DataSet. Voir ici pour la différence entre eux](https://qiita.com/c60evaporator/items/14e63d22d860b73e6f22#%E3%83%95%E3%82% A9% E3% 83% BC% E3% 83% 9E% E3% 83% 83% E3% 83% 88% E6% 8C% 87% E5% AE% 9A% E3% 81% 8C2% E3% 81% 8B% E6% 89% 80% E3% 81% AB% E5% 88% 86% E3% 81% 8B% E3% 82% 8C% E3% 82% 8B)) ** ** - Méthode de saisie des données ** ** ・ Méthode pour dessiner un graphique basé sur les spécifications et les données de l'interface utilisateur ci-dessus ** La configuration est telle qu'elle peut être spécifiée indépendamment dans l'ordre de.

De plus, ** je ne sais pas comment spécifier le format! Pour ceux qui disent ** Même si vous ne spécifiez pas le format (ne mettez pas d'argument dans le constructeur) J'ai ajouté une fonction qui rend ma subjectivité agréable (bien que ce soit une expression abstraite ... lol).

Surtout pour le réglage des couleurs, il existe de nombreux points de réglage et le réglage manuel est gênant. ** - Spécifiez automatiquement la couleur des lignes et des barres en fonction de Color Universal Design ** ** ・ Lorsque l'arrière-plan est noir (la luminosité est de 0,5 ou moins), les caractères sont automatiquement remplacés par du blanc **

Ajout de la fonction

3. Créer un indice d'outil

"Indice d'outil" qui affiche les détails des données lorsque vous appuyez sur le point de données

Avec, la visibilité de l'interface utilisateur est grandement améliorée.

Cependant, le Document officiel ne décrit pas correctement la méthode de mise en œuvre. Il est nécessaire de l'implémenter en tâtonnant tout en regardant l'exemple de code.

Correspondance avec ce package

Les spécifications suivantes ont été rendues possibles dans la classe de spécification de format afin que les conseils d'outils puissent être affichés facilement. ** A. Afficher ou non les conseils relatifs aux outils ** Spécifie s'il faut afficher les conseils d'outil

** B. Direction axiale des données à afficher (X, Y, XY) ** Sélectionnez la direction axiale des données à afficher comme indiqué sur la figure ci-dessous (à partir de la gauche: pas d'affichage, X uniquement, Y uniquement, les deux XY)

** C. Pour les graphiques de séries chronologiques, format d'affichage de l'heure (par exemple "M / j HH: mm") ** Activé pour spécifier le format d'affichage de l'heure lorsque l'axe X est une série chronologique. Dans la figure ci-dessous, le format "j jour H heure" est spécifié.

** D. Unités données aux données (par exemple ° C,%, Pa, etc.) ** Des unités peuvent être ajoutées aux données affichées pour les axes X et Y. Dans la figure ci-dessous, l'unité «cercle» est ajoutée à l'axe Y.

4. Il existe peu de documents japonais

On peut dire qu'il n'y a pas d'articles qui soient expliqués de manière exhaustive en japonais. Surtout pour le système de spécification de format UI, il existe de nombreuses propriétés de méthode dont l'explication n'est pas décrite dans le document officiel anglais.

Correspondance avec ce package

Dans cet article, [Liste des propriétés de spécification du format de l'interface utilisateur et un lien indiquant les modifications dues aux spécifications](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E3%82%B0%E3%83] % A9% E3% 83% 95% E5% 85% A8% E4% BD% 93chart% E3% 81% AB% E9% 81% A9% E7% 94% A8% E3% 81% 99% E3% 82% 8Bui % E3% 83% 95% E3% 82% A9% E3% 83% BC% E3% 83% 9E% E3% 83% 83% E3% 83% 88% E4% B8% 80% E8% A6% A7) ([Cliquez ici pour obtenir la liste des propriétés de spécification du format de l'interface utilisateur DataSet](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E3%82%AB%E3%83%86%E3%82%B4%E3%83% AA% E3% 81% 94% E3% 81% A8dataset% E3% 81% AB% E9% 81% A9% E7% 94% A8% E3% 81% 99% E3% 82% 8Bui% E3% 83% 95% E3% 82% A9% E3% 83% BC% E3% 83% 9E% E3% 83% 83% E3% 83% 88% E4% B8% 80% E8% A6% A7))

Quelle propriété doit être définie et comment la forme du graphique va changer Je pense que vous pouvez facilement le suivre avec des images japonaises +

Les choses nécessaires

Veuillez créer l'environnement de développement suivant ** ・ PC de développement (Windows 10 est utilisé cette fois) ** ** ・ Android Studio (4.0.1 est utilisé cette fois, la version Android est recommandée après API26) ** ** - Smartphone Android pour fonctionner (Pixel 3a est utilisé cette fois) **

Méthode d'introduction

La procédure est la suivante ** 1. Introduction de MPAndroidChart ** ** 2. Introduction du package CustomMP Android Chart **

1. Introduction de MPAndroidChart

Introduisez MPAndroidChart, une bibliothèque de dessins graphiques, dans le projet

Dans build.gradle (Projet),

allprojects {
    repositories{
        :
        maven { url 'https://jitpack.io' }
        :

J'ajouterai la description. 9_mpandroidchart_build.gradle.png

Dans build.gradle (Module: app),

dependencies {
    :
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
    :

J'ajouterai la description. 10_mpandroidchart_build.gradle_app.png

Si vous fermez et rouvrez le projet avec "Fichier → Fermer le projet" dans la barre de menu, La bibliothèque est reflétée.

2. Introduction du package CustomMP Android Chart

Une collection de méthodes et de classes pour créer facilement le graphique MPAndroidChart ci-dessus, Emballé en tant que «graphique Android MP personnalisé». Téléchargé sur Github

Aperçu du package

Il se compose des 6 modules suivants ** ・ LineChartMethods.kt **: Une collection de méthodes pour les graphiques linéaires ** ・ BarChartMethods.kt **: Une collection de méthodes pour les graphiques à barres ** ・ CandleStickChartMethods.kt **: Une collection de méthodes pour les graphiques en chandeliers (graphiques comme les graphiques boursiers) ** ・ PieChartMethods.kt **: Une collection de méthodes pour les graphiques linéaires ** ・ MarkerViews.kt **: classe d'affichage de l'indice d'outil ** ・ ChartFormats.kt **: un module qui collecte des classes pour spécifier les formats d'interface utilisateur.

En outre, le fichier de mise en page utilisé dans l'indicateur d'outil Vous devez également installer ** simple_marker_view.xml **.

Comment installer le package

Suivez les étapes ci-dessous pour l'installer dans le projet afin de créer le graphique. ** * Il existe de nombreuses opérations manuelles, donc si vous connaissez une meilleure façon de le fournir, je vous serais reconnaissant si vous pouviez m'apprendre **

Cliquez avec le bouton droit sur le dossier du package directement sous le dossier java, sélectionnez Nouveau → Package et nommez-le "graphique".

Créer un module pour dessiner un graphique linéaire

Cliquez avec le bouton droit sur le dossier du graphique créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "LineChartMethods" et sélectionnez LineChartMethods.kt sur GitHub. Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Changement selon la structure du projet" en haut du code selon le cas selon la structure du projet.

Créer un module pour dessiner des graphiques à barres

Cliquez avec le bouton droit sur le dossier du graphique créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "BarChartMethods" et sélectionnez BarChartMethods.kt sur GitHub. Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Changement selon la structure du projet" en haut du code selon le cas selon la structure du projet.

Créer un module pour dessiner des graphiques en chandeliers

Cliquez avec le bouton droit sur le dossier du graphique créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "CandleStickChartMethods" et sélectionnez CandleStickChartMethods.kt sur GitHub. Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Modifier selon la structure du projet" en haut du code selon le cas en fonction de la structure du projet.

Créer un module pour dessiner un graphique circulaire

Cliquez avec le bouton droit sur le dossier du graphique créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "PieChartMethods" et sélectionnez PieChartMethods.kt sur GitHub. Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Changement selon la structure du projet" en haut du code selon le cas selon la structure du projet.

Création d'une classe pour afficher les conseils d'outils

Cliquez avec le bouton droit sur le dossier du graphique créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "MarkerViews" et sélectionnez MarkerViews.kt sur GitHub Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Modifier selon la structure du projet" en haut du code selon le cas en fonction de la structure du projet.

Créer une classe pour spécifier le format de l'interface utilisateur

Cliquez avec le bouton droit sur le dossier de graphiques créé ci-dessus, sélectionnez Nouveau → Fichier / Classe Kotlin, nommez-le "ChartFormats" et sélectionnez ChartFormats.kt sur GitHub. Copiez (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).

Veuillez modifier la partie commentée "Modifier selon la structure du projet" en haut du code selon le cas en fonction de la structure du projet.

Création d'un fichier de mise en page pour les info-bulles

Suivez les étapes ci-dessous pour créer un fichier de mise en page pour les conseils d'outils lorsque vous cliquez sur.

Cliquez avec le bouton droit sur res / layout, sélectionnez Nouveau → Fichier de ressources de mise en page et nommez-le "simple_marker_view"

Réécrivez le fichier xml créé avec le contenu suivant

`simple_marker_view.xml`


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@color/toolTipBgColor"
    tools:ignore="Overdraw">

    <TextView
        android:id="@+id/tvSimple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="7dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text=""
        android:textSize="12sp"
        android:textColor="@color/toolTipTextColor"
        android:ellipsize="end"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Ajoutez le contenu suivant à res / values / colors.xml. (Veuillez changer le code couleur voir ici selon le cas)

`colors.xml`


    :
    <color name="toolTipBgColor">#999999</color>//Code de couleur d'arrière-plan
    <color name="toolTipTextColor">#ffffff</color>//Code de couleur du texte
    :

Ceci termine l'installation du package.

comment utiliser

Pour chaque graphique linéaire, graphique à barres, graphique en chandelier et graphique circulaire Je vais vous expliquer la méthode de mise en œuvre.

L'exemple de code a été téléchargé sur GitHub, il serait donc plus facile à comprendre si vous pouvez également vous y référer

1. Comment mettre en œuvre un graphique linéaire

Je vais vous expliquer comment implémenter le graphique linéaire séparément pour la mise en page (.xml) et la section de traitement (.kt).

Implémentation de la mise en page

Incluez un widget pour LineChart dans votre mise en page (par exemple activity_main.xml) comme indiqué ci-dessous.

`activity_main.xml`


  :
<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/lineChartExample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  :

Implémentation du traitement des appels de méthode de création de graphe linéaire

Implémentez le processus d'appel de la méthode de création de graphe linéaire dans le fichier Kotlin (par exemple MainActivity.kt). ・ Lorsqu'il n'y a qu'une seule ligne ・ Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal ・ Lorsqu'il y a plusieurs Je vais expliquer les exemples séparément dans.

Quand il y a une ligne

En tant que flux de base ** - Spécification du format de graphique ** ** - Spécifiez le format de DataSet ** ** ・ Stockez les données dans Entry avec la méthode makeLineChartData ** ** - Dessinez un graphique avec la méthode setupLineChart ** Ce sera.

        //Création d'exemples de données à afficher//
        val x = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//Données de l'axe X
        val y = x.map{it*it}//Données de l'axe Y (axe X au carré)

        //Format de graphique
        var lineChartFormat = LineChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var lineDataSetFormat =  mapOf(
            "linear" to LineDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
            "linear" to makeLineChartData(x, y)
        )

        //② ～ ⑦ Création de graphes
        setupLineChart(allLinesEntries, findViewById(R.id.lineChartExample), lineChartFormat, lineDataSetFormat, context)

Le format Chart et le format DataSet spécifient l'interface utilisateur du graphique. [Les détails seront décrits plus tard](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#ui%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3% 83% 83% E3% 83% 88% E3% 81% AE% E6% 8C% 87% E5% AE% 9A% E6% 96% B9% E6% B3% 95) Lorsque vous exécutez le code ci-dessus, vous verrez un graphique comme celui ci-dessous.

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

Si vous souhaitez créer la série chronologique de l'axe horizontal, utilisez la méthode pour stocker les données dans Entry. makeLineChartData() → makeDateLineChartData() Changer pour

//Création d'exemples de données à afficher//
        //Données de l'axe X(temps)
        val sdf: SimpleDateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss")
        val x = listOf<Date>(
            sdf.parse("2020/09/01 00:00:00"),
            sdf.parse("2020/09/01 06:00:00"),
            sdf.parse("2020/09/01 12:00:00"),
            sdf.parse("2020/09/01 18:00:00"),
            sdf.parse("2020/09/02 00:00:00"),
            sdf.parse("2020/09/02 06:00:00"),
            sdf.parse("2020/09/02 12:00:00"),
            sdf.parse("2020/09/03 18:00:00"),
        )
        val y = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//Données de l'axe Y(Valeur numérique)

        //Format de graphique
        var lineChartFormat = LineChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var lineDataSetFormat =  mapOf(
            "linear" to LineDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
            "linear" to makeDateLineChartData(x, y, lineChartFormat.timeAccuracy)
        )

        //② ～ ⑦ Création de graphes
        setupLineChart(allLinesEntries, findViewById(R.id.lineChartExample), lineChartFormat, lineDataSetFormat, context)

Lorsque vous souhaitez représenter avec précision des temps non équidistants

[Comme mentionné ci-dessus](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E9%9D%9E%E7%AD%89%E9%96%93%E9%9A%94%E3%81% AA% E6% 99% 82% E9% 96% 93% E3% 82% 92% E6% AD% A3% E7% A2% BA% E3% 81% AB% E8% A1% A8% E7% 8F% BE% E3% 81% 97% E3% 81% 9F% E3% 81% 84% E3% 81% A8% E3% 81% 8D), car la méthode ci-dessus trace les points de données dans la direction X à intervalles égaux. Si l'intervalle d'acquisition des données n'est pas constant, le temps ne sera pas représenté avec précision sur l'axe horizontal.

Si vous souhaitez exprimer l'heure avec précision dans un tel cas, utilisez le format Graphique. timeAccuracy = true Spécifier.

        //Format de graphique
        var lineChartFormat = LineChartFormat(
        timeAccuracy = true,
        /*Spécifiez les autres formats de graphique ici*/
        )

Les étiquettes ne s'affichent qu'au début et à la fin

Lorsqu'il y a plusieurs lignes

La différence avec le temps d'un -Spécifier le format DataSet pour le nombre de lignes ・ Les données sont stockées dans Entry pour le nombre de lignes Ce sera.

        //Création d'exemples de données à afficher//
        val x = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//Données de l'axe X
        val y1 = x.map{it}//Données de l'axe Y 1 (axe X au carré)
        val y2 = x.map{it*it}//Données de l'axe Y 2 (axe X au carré)

        //Format de graphique
        var lineChartFormat = LineChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var lineDataSetFormat =  mapOf(
            "linear" to LineDataSetFormat(/*Spécifiez le format de DataSet ici*/),
            "square" to LineDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
            "linear" to makeLineChartData(x, y1),
            "square" to makeLineChartData(x, y2)
        )

        //② ～ ⑦ Création de graphes
        setupLineChart(allLinesEntries, lineChart, lineChartFormat, lineDataSetFormat, context)

Si vous définissez la méthode de stockage des données sur makeDateLineChartData, vous pouvez créer un graphique avec plusieurs lignes et séries chronologiques.

2. Comment mettre en œuvre un graphique à barres

La méthode d'implémentation du graphique à barres est expliquée séparément pour la mise en page (.xml) et la section de traitement (.kt).

Implémentation de la mise en page

Comme avec LineChart, intégrez le widget pour BarChart dans la mise en page (par exemple activity_main.xml).

`activity_main.xml`


  :
<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/barChartExample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  :

Implémentation du code d'exécution

Implémentez le processus d'appel de la méthode de création de graphique à barres dans le fichier Kotlin (par exemple MainActivity.kt). ・ Lorsqu'il n'y a qu'un seul bâton ・ Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal ・ Lors de l'affichage de plusieurs barres de manière empilée ・ Lors de l'affichage de plusieurs barres côte à côte Je vais expliquer les exemples séparément dans.

Quand il y a un bâton

C'est presque le même que le cas du graphique de ligne de pliage. Je pense que vous pouvez simplement changer le nom de la classe "Line ~" en "Bar ~".

        //Création d'exemples de données à afficher//
        val x = listOf<Float>(1f, 2f, 3f, 4f, 6f, 7f, 8f, 9f)//Données de l'axe X
        val y = x.map{it*it}//Données de l'axe Y (axe X au carré)

        //Format de graphique
        var barChartFormat = BarChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var barDataSetFormat =  mapOf(
            "square" to BarDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
            "square" to makeBarChartData(x, y)
        )

        //② ～ ⑦ Création de graphes
        setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

Si vous souhaitez créer la série chronologique de l'axe horizontal, utilisez la méthode pour stocker les données dans Entry. makeBarChartData() → makeDateBarChartData() Changer pour

Contrairement au cas du graphique linéaire, la propriété timeAccuracy ne peut pas être spécifiée.

        //Création d'exemples de données à afficher//
        //Données de l'axe X(temps)
        val sdf: SimpleDateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss")
        val x = listOf<Date>(
            sdf.parse("2020/09/01 00:00:00"),
            sdf.parse("2020/09/01 06:00:00"),
            sdf.parse("2020/09/01 12:00:00"),
            sdf.parse("2020/09/01 18:00:00"),
            sdf.parse("2020/09/02 00:00:00"),
            sdf.parse("2020/09/02 06:00:00"),
            sdf.parse("2020/09/02 12:00:00"),
            sdf.parse("2020/09/03 18:00:00"),
        )
        val y = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//Données de l'axe Y(Valeur numérique)

        //Format de graphique
        var barChartFormat = BarChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var barDataSetFormat =  mapOf(
            "square" to BarDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
            "square" to makeDateBarChartData(x, y)
        )

        //② ～ ⑦ Création de graphes
        setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)

Lors de l'affichage de plusieurs barres de manière empilée

La différence avec le temps d'un -Les données de l'axe Y à stocker dans Entry sont les données que vous souhaitez accumuler dans List <MutableList >. -Le nom de catégorie pour chaque barre est spécifié dans Liste dans la propriété de format DataSet stackLabels. -Pour la spécification de couleur barre par barre, il est nécessaire de spécifier dans la liste en "couleurs" au lieu de la propriété "couleur" (Référence % 83% 86% E3% 82% B4% E3% 83% AA% E3% 81% 94% E3% 81% A8dataset% E3% 81% AB% E9% 81% A9% E7% 94% A8% E3% 81 % 99% E3% 82% 8Bui% E3% 83% 95% E3% 82% A9% E3% 83% BC% E3% 83% 9E% E3% 83% 83% E3% 83% 88% E4% B8% 80 % E8% A6% A7))) Ce sera.

        //Création d'exemples de données à afficher//
        val x = listOf<Float>(1f, 2f, 3f, 4f, 6f, 7f, 8f, 9f)//Données de l'axe X
        val y = x.map{ mutableListOf(it, it*it)}//Données de l'axe Y (1 élément:Axe X 1ère puissance, 2 articles:X au carré)

        //Format de graphique
        var barChartFormat = BarChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var barDataSetFormat =  mapOf(
            "stack" to BarDataSetFormat(
                stackLabels = listOf("linear","square"),
                /*Spécifiez les autres formats de DataSet ici*/
            )
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
            "stack" to makeStackBarChartData(x, y)
        )

        //② ～ ⑦ Création de graphes
        setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)

Lors de l'affichage de plusieurs barres côte à côte

Comme pour les lignes de pliage multiples, la différence par rapport au cas d'une ligne est -Spécifiez le format DataSet pour le nombre de barres ・ Les données sont stockées dans l'entrée pour le nombre de barres Ce sera. ** * Veuillez noter qu'il ne peut être utilisé que lorsque l'espacement de l'axe horizontal est constant **

        //Création d'exemples de données à afficher
        val x = listOf<Float>(1f, 2f, 3f, 4f, 5f, 6f, 7f, 8f)//Données de l'axe X
        val y1 = x.map{it}//Données de l'axe Y 1 (axe X au carré)
        val y2 = x.map{it*it}//Données de l'axe Y 2 (axe X au carré)

        //Format de graphique
        var barChartFormat = BarChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var barDataSetFormat =  mapOf(
            "linear" to BarDataSetFormat(/*Spécifiez le format de DataSet ici*/),
            "square" to BarDataSetFormat(/*Spécifiez le format de DataSet ici*/)
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
            "linear" to makeBarChartData(x, y1),
            "square" to makeBarChartData(x, y2)
        )

        //② ～ ⑦ Création de graphes
        setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)

3. Comment implémenter le graphique en chandelier

"Rose foot graph" est un graphique utilisé dans les graphiques boursiers. Peut également être utilisé comme substitut à un diagramme de barbe boîte

La méthode d'implémentation est expliquée séparément pour la mise en page (.xml) et la section de traitement (.kt).

Implémentation de la mise en page

Comme avec LineChart, intégrez le widget pour CandleStickChart dans la mise en page (par exemple activity_main.xml).

`activity_main.xml`


  :
<com.github.mikephil.charting.charts.CandleStickChart
    android:id="@+id/candleStickChartExample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  :

Implémentation du code d'exécution

Implémentez le processus d'appel de la méthode de création de graphique en chandelier dans le fichier Kotlin (par exemple MainActivity.kt). ・ Lorsque l'axe horizontal est une valeur numérique ・ Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal Je vais expliquer les exemples séparément dans.

Lorsque l'axe horizontal est une valeur numérique

Notez que lors du stockage de données dans l'entrée, vous devez spécifier cinq types d'arguments: valeur de l'axe X, valeur maximale Y, valeur minimale Y, valeur de début Y et valeur de fin Y.

        //Création d'exemples de données à afficher//
        val x = listOf<Float>(2f, 3f, 4f, 5f, 6f, 7f, 8f, 9f)//Données de l'axe X
        val yHigh = x.map{it * 2}//Données de l'axe Y (valeur maximale)
        val yLow = x.map{it}//Données de l'axe Y (valeur minimale)
        val yOpen = x.map{it + 1}//Données de l'axe Y (valeur de départ)
        val yClose = x.map{it + 2}//Données de l'axe Y (valeur finale)

        //Format de graphique
        var candleChartFormat = CandleChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet(Carte des noms de catégorie)
        var candleDataSetFormat = CandleDataSetFormat(/*Spécifiez le format de DataSet ici*/)

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val candleEntries = makeCandleChartData(x, yHigh, yLow, yOpen, yClose)

        //② ～ ⑦ Création de graphes
        setupCandleStickChart(candleEntries, candleStickChart, candleChartFormat, candleDataSetFormat, context)

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

Si vous souhaitez créer la série chronologique de l'axe horizontal, utilisez la méthode pour stocker les données dans Entry. makeCandleChartData() → makeDateCandleChartData() Changer pour

La propriété TimeAccuracy ne peut pas être spécifiée

        //Création d'exemples de données à afficher//
        //Données de l'axe X(temps)
        val sdf: SimpleDateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss")
        val x = listOf<Date>(
            sdf.parse("2020/09/01 00:00:00"),
            sdf.parse("2020/09/01 06:00:00"),
            sdf.parse("2020/09/01 12:00:00"),
            sdf.parse("2020/09/01 18:00:00"),
            sdf.parse("2020/09/02 00:00:00"),
            sdf.parse("2020/09/02 06:00:00"),
            sdf.parse("2020/09/02 12:00:00"),
            sdf.parse("2020/09/03 18:00:00"),
        )
        val ySeed = listOf<Float>(2f, 3f, 4f, 5f, 6f, 7f, 8f, 9f)//Pour la génération de données sur l'axe Y
        val yHigh = ySeed.map{it * 2}//Données de l'axe Y (valeur maximale)
        val yLow = ySeed.map{it}//Données de l'axe Y (valeur minimale)
        val yOpen = ySeed.map{it + 1}//Données de l'axe Y (valeur de départ)
        val yClose = ySeed.map{it + 2}//Données de l'axe Y (valeur finale)

        //Format de graphique
        var candleChartFormat = CandleChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet
        var candleDataSetFormat = CandleDataSetFormat(/*Spécifiez le format de DataSet ici*/)

        //① Stockage des données dans Entry
        val candleEntries = makeDateCandleChartData(x, yHigh, yLow, yOpen, yClose)

        //② ～ ⑦ Création de graphes
        setupCandleStickChart(candleEntries, candleStickChart, candleChartFormat, candleDataSetFormat, context)

4. Comment mettre en œuvre un graphique circulaire

La méthode d'implémentation du graphe circulaire est expliquée séparément pour la mise en page (.xml) et la partie traitement (.kt ou .java).

Implémentation de la mise en page

Comme pour LineChart, intégrez le widget pour PieChart dans la mise en page (par exemple activity_main.xml).

`activity_main.xml`


  :
<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/pieChartExample"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  :

Implémentation du code d'exécution

Implémentez le processus d'appel de la méthode de création de graphe circulaire dans le fichier Kotlin (par exemple MainActivity.kt).

        //Création d'exemples de données à afficher//
        val dimensions = listOf("A", "B", "C", "D")//Nom du cercle divisé(Type de chaîne)
        val values = listOf(1f, 2f, 3f, 4f)//La taille du cercle de division(Type de flotteur)

        //Format de graphique
        var pieChartFormat = PieChartFormat(/*Spécification du format de graphique ici*/)
        //Format DataSet
        var pieDataSetFormat = PieDataSetFormat(/*Spécifiez le format de DataSet ici*/)

        //① Stockage des données dans Entry
        val pieEntries = makePieChartEntries(dimensions, values)

        //② ～ ⑦ Création de graphes
        setupPieChart(pieEntries, pieChart, "PieChart", pieChartFormat, pieDataSetFormat)

Comment spécifier le format de l'interface utilisateur

Je vais expliquer ce qui s'applique à l'ensemble du graphique (graphique) et ce qui s'applique à chaque catégorie (DataSet) séparément.

Comme pour la méthode d'application, chaque contenu de propriété peut être spécifié en donnant un argument au constructeur comme indiqué ci-dessous. (Si non spécifié, [Chapitre précédent "Utilisation"](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3 L'interface utilisateur sera comme indiqué dans% 95))

        //Création d'exemples de données à afficher//
        //Données de l'axe X(temps)
        val sdf: SimpleDateFormat = SimpleDateFormat("yyyy/M")
        val x = listOf<Date>(
            sdf.parse("1990/1"),
            sdf.parse("1995/1"),
            sdf.parse("2000/1"),
            sdf.parse("2005/1"),
            sdf.parse("2010/1"),
            sdf.parse("2015/1"),
            sdf.parse("2018/1")
        )
        val y1 = listOf(6.0f, 7.6f, 10.3f, 13.0f, 15.0f, 18.2f, 20.6f)//Données de l'axe Y 1 (USA)
        val y2 = listOf(0.4f, 0.7f, 1.2f, 2.3f, 6.1f, 11.2f, 13.4f)//Données de l'axe Y 2 (Chine)
        val y3 = listOf(3.1f, 5.4f, 4.8f, 4.8f, 5.7f, 4.4f, 5.0f)//Données de l'axe Y 3 (Japon)
        val y4 = listOf(1.6f, 2.6f, 1.9f, 2.8f, 3.4f, 3.4f, 4.0f)//Données de l'axe Y 4 (Allemagne)

        ///////////Spécifiez le format du graphique ici///////////
        var lineChartFormat = LineChartFormat(
            legendTextSize = 10f,
            description = "Évolution du PIB des principaux pays",
            descriptionTextSize = 15f,
            descriptionYOffset = -10f,
            bgColor = Color.DKGRAY,
            xAxisDateFormat = SimpleDateFormat("aaaa année"),
            toolTipDateFormat = SimpleDateFormat("aaaa année"),
            toolTipDirection = "xy",
            toolTipUnitY = "Trillions de dollars"
        )
        ///////////Spécifiez le format de DataSet ici(Carte des noms de catégorie)///////////
        var lineDataSetFormat =  mapOf(
            "Amérique" to LineDataSetFormat(//Spécification du format DataSet pour la ligne 1
                lineColor = UNIVERSAL_BLUE,
                lineWidth = 2f
            ),
            "Chine" to LineDataSetFormat(//Spécification du format DataSet pour la ligne 2
                lineColor = UNIVERSAL_RED,
                lineWidth = 2f
            ),
            "Japon" to LineDataSetFormat(//Spécification du format DataSet pour la ligne 3
                lineColor = UNIVERSAL_SKYBLUE,
                lineWidth = 2f
            ),
            "Allemagne" to LineDataSetFormat(//Spécification du format DataSet pour la ligne 4
                lineColor = Color.LTGRAY,
                lineWidth = 2f
            )
        )

        //① Stockage des données dans Entry(Carte des noms de catégorie)
        val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
            "Amérique" to makeDateLineChartData(x, y1, false),
            "Chine" to makeDateLineChartData(x, y2, false),
            "Japon" to makeDateLineChartData(x, y3, false),
            "Allemagne" to makeDateLineChartData(x, y4, false)
        )

        //② ～ ⑦ Création de graphes
        setupLineChart(allLinesEntries, lineChart, lineChartFormat, lineDataSetFormat, context)

Il existe quelques exemples d'implémentation dans GitHub MainActivity.kt ( Surtout depuis les 4 dernières méthodes), je pense que ce sera plus facile à comprendre si vous pouvez vous référer à cela.

Liste des formats d'interface utilisateur appliqués à l'ensemble du graphique (graphique)

Vous trouverez ci-dessous une liste de propriétés pouvant être spécifiées au format graphique.

** Le lien dans la colonne "Nom de la propriété dans MPAndroidChart" ** illustre comment l'interface utilisateur change réellement (article séparé).

En ce qui concerne les propriétés d'origine de ce package qui ne sont pas compatibles avec MPAndroidChart, les modifications sont présentées séparément dans cet article.

Cible applicable	Éléments à modifier	Nom de la propriété au format graphique	Moule	Remarques	Nom de la propriété dans MPAndroidChart	Ligne brisée	graphique à barres	Pied de bougie	diagramme circulaire
Guide d'utilisation	Forme de marque	legendFormat	Legend.LegendForm?	nullならGuide d'utilisation表示なし	.legend.form	〇	〇	〇	〇
Guide d'utilisation	Couleur de la lettre	legentTextColor	Int?	Par défaut si nul(noir)	.legend.textColor	〇	〇	〇	〇
Guide d'utilisation	taille de police	legendTextSize	Float?	Par défaut si nul	.legend.textSize	〇	〇	〇	〇
Étiquette de description	Afficher la chaîne de caractères	description	String?	nullならÉtiquette de descriptionなし	.description.text	〇	〇	〇	〇
Étiquette de description	Couleur de la lettre	descriptionTextColor	Int?	Par défaut si nul(noir)	.description.textColor	〇	〇	〇	〇
Étiquette de description	taille de police	descriptionTextSize	Float?	Par défaut si nul	.description.textSize	〇	〇	〇	〇
Étiquette de description	Réglage fin de la position horizontale	descriptionXOffset	Float?	Par défaut si nul	.description.xOffset	〇	〇	〇	〇
Étiquette de description	Réglage fin de la position verticale	descriptionYOffset	Float?	Par défaut si nul	.description.yOffset	〇	〇	〇	〇
Contexte	Contexte色	bgColor	Int?	Par défaut si nul(blanc)	.setBackgroundColor()	〇	〇	〇	〇
Opération tactile	Valide invalide	touch	Boolean		.setTouchEnabled()	〇	〇	〇
Étiquette de l'axe X	Avec ou sans écran	xAxisEnabled	Boolean		.xAxis.isEnabled	〇	〇	〇
Étiquette de l'axe X	Couleur de la lettre	xAxisTextColor	Int?	Par défaut si nul(noir)	.xAxis.textColor	〇	〇	〇
Étiquette de l'axe X	taille de police	xAxisTextSize	Float?	Par défaut si nul	.xAxis.textSize	〇	〇	〇
Étiquette de l'axe X	Format d'affichage de l'heure	xAxisDateFormat	SimpleDateFormat?	M si nul/d H:mm	-	〇	〇	〇
Libellé de l'axe Y gauche	Avec ou sans écran	yAxisLeftEnabled	Boolean		.axisLeft.isEnabled	〇	〇	〇
Libellé de l'axe Y gauche	Couleur de la lettre	yAxisLeftTextColor	Int?	Par défaut si nul(noir)	.axisLeft.textColor	〇	〇	〇
Libellé de l'axe Y gauche	taille de police	yAxisLeftTextSize	Float?	Par défaut si nul	.axisLeft.textSize	〇	〇	〇
Libellé de l'axe Y gauche	Afficher la limite inférieure	yAxisLeftMin	Float?	Si nul, il n'y a pas de limite inférieure	.axisLeft.axisMinimum	〇	〇	〇
Libellé de l'axe Y gauche	Afficher la limite supérieure	yAxisLeftMax	Float?	Si nul, il n'y a pas de limite supérieure	.axisLeft.axisMaximam	〇	〇	〇
Libellé de l'axe Y droit	Avec ou sans écran	yAxisRightEnabled	Boolean		.axisRight.isEnabled	〇	〇	〇
Libellé de l'axe Y droit	Couleur de la lettre	yAxisRightTextColor	Int?	Par défaut si nul(noir)	.axisRight.textColor	〇	〇	〇
Libellé de l'axe Y droit	taille de police	yAxisRightTextSize	Float?	Par défaut si nul	.axisRight.textSize	〇	〇	〇
Libellé de l'axe Y droit	Afficher la limite inférieure	yAxisRightMin	Float?	Si nul, il n'y a pas de limite inférieure	.axisRight.axisMinimum	〇	〇	〇
Libellé de l'axe Y droit	Afficher la limite supérieure	yAxisRightMax	Float?	Si nul, il n'y a pas de limite supérieure	.axisRight.axisMaximam	〇	〇	〇
Opération d'agrandissement	Direction d'expansion	zoomDirection	String?	"x", "y", "xy" Si nul, l'expansion n'est pas valide	.isScaleXEnabled .isScaleYEnabled .setScaleEnabled()	〇	〇	〇
Opération d'agrandissement	Opération de pincement efficace	zoomPinch	Boolean		.setPinchZoom()	〇	〇	〇
Conseils d'outils	Axe à afficher	toolTipDirection	String?	"x", "y", "xy" nullならConseils d'outilsなし	.marker	〇	〇	〇
Conseils d'outils	Format des graphiques de séries chronologiques	toolTipDateFormat	SimpleDateFormat?	M si nul/d H:mm	.marker	〇	〇	〇
Conseils d'outils	Unité de l'axe X	toolTipUnitX	String	La valeur par défaut est aucune unité("")	.marker	〇	〇	〇
Conseils d'outils	Unité de l'axe Y	toolTipUnitY	String	La valeur par défaut est aucune unité("")	.marker	〇	〇	〇
Méthode d'affichage de l'axe X	Précision de l'échelle de l'axe des temps	timeAccuracy	Boolean	Si True, l'axe des temps est affiché avec précision(Les libellés sont maximum et minimum uniquement)	-	〇
étiquette	Couleur de la lettre	labelColor	Int?	Par défaut si nul(noir)	.setEntryLabelColor()				〇
étiquette	taille de police	labelTextSize	Float?	Par défaut si nul	.setEntryLabelTextSize()				〇
Texte central	Afficher la chaîne de caractères	centerText	String?	Si nul, il n'y a pas de texte central	.centerText				〇
Texte central	Couleur de la lettre	centerTextColor	Int?	Par défaut si nul(noir)	.setCenterTextColor()				〇
Texte central	taille de police	centerTextSize	Float?	Par défaut si nul	.setCenterTextSize()				〇
Trou central	Rayon du trou	holeRadius	Float?	Par défaut si nul	.holeRadius				〇
Trou central	Largeur de la zone de couleur claire autour du trou	transparentCircleRadius	Float?	Par défaut si nul	.transparentCircleRadius				〇
Trou central	Couleur de remplissage du trou	holeColor	Int?	Par défaut si nul(noir)	.setHoleColor()				〇
______________	____________			________________

Cette méthode originale de paquet

xAxisDateFormat Modifier le format d'affichage de l'heure sur l'axe X (uniquement pour les graphiques de séries chronologiques, la valeur par défaut est "M / j H: mm")

var lineChartFormat = LineChartFormat(xAxisDateFormat = SimpleDateFormat("j jour H heures"))

timeAccuracy [Identique à ci-dessus](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E9%9D%9E%E7%AD%89%E9%96%93%E9%9A%94%E3% 81% AA% E6% 99% 82% E9% 96% 93% E3% 82% 92% E6% AD% A3% E7% A2% BA% E3% 81% AB% E8% A1% A8% E7% 8F% BE% E3% 81% 97% E3% 81% 9F% E3% 81% 84% E3% 81% A8% E3% 81% 8D), spécifie la précision de l'échelle de l'axe des temps (graphique en traits pointillés série chronologique uniquement)

`Échelle d'affichage précise, l'étiquette de temps n'affiche que le maximum et le minimum`


var lineChartFormat = LineChartFormat(timeAccuracy=true)

`Affiche toutes les étiquettes de temps, moins précises`


var lineChartFormat = LineChartFormat(timeAccuracy=false)

toolTipDirection

`Aucun affichage d'indice d'outil`


var lineChartFormat = LineChartFormat(toolTipDirection=null)

`Afficher les valeurs de l'axe X dans les conseils d'outil`


var lineChartFormat = LineChartFormat(toolTipDirection="x")

`Afficher les valeurs de l'axe Y dans les conseils d'outil`


var lineChartFormat = LineChartFormat(toolTipDirection="y")

`Afficher les valeurs de l'axe X et de l'axe Y dans les conseils d'outil`


var lineChartFormat = LineChartFormat(toolTipDirection="xy")

toolTipDateFormat Modifier le format d'affichage de l'heure de l'indice d'outil (uniquement pour les graphiques de séries chronologiques, la valeur par défaut est "M / j H: mm")

`Format d'affichage de l'heure de l'indice d'outil"j jour H heures"À`


var lineChartFormat = LineChartFormat(
            toolTipDirection="xy",
            toolTipDateFormat = SimpleDateFormat("j jour H heures")
        )

toolTipUnitX Spécifie l'unité à ajouter à l'affichage de l'axe X du conseil d'outil (la valeur par défaut n'est pas d'unité)

`Unité de l'axe X de l'indice d'outil"journée"À`


var lineChartFormat = LineChartFormat(
            toolTipDirection="xy",
            toolTipUnitX = "journée"
        )

toolTipUnitY Spécifie l'unité à ajouter à l'affichage de l'axe Y du conseil d'outil (la valeur par défaut n'est pas d'unité)

`Unité de l'axe Y de l'indice d'outil"Cercle"À`


var lineChartFormat = LineChartFormat(
            toolTipDirection="xy",
            toolTipUnitY = "Cercle"
        )

Liste des formats d'interface utilisateur appliqués à chaque catégorie (DataSet)

Vous trouverez ci-dessous une liste de propriétés pouvant être spécifiées au format DataSet (spécifiées pour chaque ligne, chaque barre, etc.).

** Le lien dans la colonne "Nom de la propriété dans MPAndroidChart" ** illustre comment l'interface utilisateur change réellement (article séparé).

En ce qui concerne les propriétés d'origine de ce package qui ne sont pas compatibles avec MPAndroidChart, les modifications sont présentées séparément dans cet article.

Cible applicable	Éléments à modifier	Nom de propriété au format DataSet	Moule	Remarques	Nom de la propriété dans MPAndroidChart	Ligne brisée	graphique à barres	Pied de bougie	diagramme circulaire
Affichage de la valeur	Affichage de la valeurの有無	drawValue	Boolean		.setDrawValues()	〇	〇	〇	〇
Affichage de la valeur	Affichage de la valeurの文字色	valueTextColor	Int?	Par défaut si nul(noir)	.valueTextColor	〇	〇	〇	〇
Affichage de la valeur	Affichage de la valeurの文字サイズ	valueTextSize	Float?	Par défaut si nul	.valueTextSize	〇	〇	〇	〇
Affichage de la valeur	Affichage de la valeurのフォーマット	valueTextFormatter	String?	Par défaut si nul	.valueFormatter	〇	〇	〇	〇
axe	左右axeどちらを使用するか	axisDependency	YAxis.AxisDependency?	nullなら左Yaxe	.axisDependency	〇	〇
ligne	ligneの色	lineColor	Int?	Par défaut si nul(bleu clair)	.color	〇
ligne	largeur	lineWidth	Float?	Par défaut si nul	.lineWidth	〇
ligne	Méthode complémentaire	fittingMode	LineDataSet.Mode?	Par défaut si nul(直ligne補完)	.mode	〇
Point de données	Avec ou sans écran	drawCircles	Boolean		.setDrawCircles()	〇
Point de données	Couleur du cadre	circleColor	Int?	Par défaut si nul(bleu clair)	.setCircleColor()	〇
Point de données	Rayon du cadre	circleRadius	Float?	Par défaut si nul	.circleRadius	〇
Point de données	Couleur de remplissage du trou	circleHoleColor	Int?	Par défaut si nul(blanc)	.circleHoleRadius	〇
Point de données	Rayon du trou	circleHoleRadius	Float?	Par défaut si nul	.circleHoleColor	〇
barre	barreの色	barColor	Int?	Par défaut si nul(bleu clair)	.color		Autre que l'empilement
barre	各Empilerbarreの色リスト	barColors	List		.colors		Empiler
barre	Empilerbarreのカテゴリ名	stackLabels	List?	Par défaut si nul(Remplissez avec le nom de l'étiquette)	.stackLabels		Empiler
Ligne de bougie fine	Couleur de la ligne	shadowColor	Int		.shadowColor			〇
Ligne de bougie fine	largeur	shadowWidth	Float?	Par défaut si nul	.shadowWidth			〇
Ligne de bougie épaisse	Couleur en diminuant	decreasingColor	Int		.decreasingColor			〇
Ligne de bougie épaisse	Remplir le format en diminuant	decreasingPaint	Paint.Style?	Si nul, il y a un remplissage	.decreasingPaintStyle			〇
Ligne de bougie épaisse	Couleur lors de l'augmentation	increasingColor	Int?	Aucune couleur si nulle	.increasingColor			〇
Ligne de bougie épaisse	Remplir le format lors de l'augmentation	increasingPaint	Paint.Style?	Si nul, pas de remplissage	.increasingPaintStyle			〇
Cercle divisé	Cercle diviséの色	colors	List		.colors				〇
______________	____________			________________

Cette méthode originale de paquet

valueTextFormatter Spécifie le format de l'affichage de la valeur (Dans MPAndroidChart, spécifiez en remplaçant dans la classe ValueFormatter, mais dans ce package, spécifiez par type de chaîne)

`entier(0e place après la virgule décimale)Afficher avec`


var lineDataSetFormat = mapOf(
            "linear" to LineDataSetFormat(
                drawValue = true,
                valueTextSize = 12f,
                valueTextFormatter = "%.0f"
            )
        )

`Affiché à la 2ème place après la virgule décimale`


var lineDataSetFormat = mapOf(
            "linear" to LineDataSetFormat(
                drawValue = true,
                valueTextSize = 12f,
                valueTextFormatter = "%.2f"
            )
        )

`1ère place après la virgule décimale +"Cercle"Afficher avec`


var lineDataSetFormat = mapOf(
            "linear" to LineDataSetFormat(
                drawValue = true,
                valueTextSize = 12f,
                valueTextFormatter = "%.1f yen"
            )
        )

référence

Comment créer un graphique de série chronologique dans MPAndroidChart

Pour les graphiques non chronologiques

Pour les graphiques qui ne sont pas des séries chronologiques (l'axe X est un nombre de type flottant)

val x = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)
val y = x.map{it*it}
var entryList = mutableListOf<Entry>()
for(i in x.indices){
    entryList.add(Entry(x[i], y[i]))
}

Si vous entrez la valeur de l'axe X dans le premier terme d'entrée et la valeur de l'axe Y dans le deuxième terme, elle correspondra à la valeur de l'axe X d'entrée.

val lineDataSets = ListOf<ILineDataSet>(LineDataSet())
lineChart.data = LineData(lineDataSets)

Si tel est le cas, les deux axes seront correctement tracés, comme illustré dans la figure ci-dessous.

Pour les graphiques de séries chronologiques

Lorsque l'axe X est un numéro de type Date (java.util.Date), la valeur de l'axe X ne peut pas être saisie dans le premier terme d'entrée.

        val sdf: SimpleDateFormat = SimpleDateFormat("yyyy/MM/dd HH:mm:ss")
        val x = listOf<Date>(
            sdf.parse("2020/09/01 00:00:00"),
            sdf.parse("2020/09/01 06:00:00"),
            sdf.parse("2020/09/01 12:00:00"),
            sdf.parse("2020/09/01 18:00:00"),
            sdf.parse("2020/09/02 00:00:00"),
            sdf.parse("2020/09/02 06:00:00"),
            sdf.parse("2020/09/02 12:00:00"),
            sdf.parse("2020/09/02 18:00:00"),
        )
        val y = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)
        //Stockage des données dans Entry
        var entryList = mutableListOf<Entry>()
        for(i in x.indices){
            entryList.add(
                Entry(x[i], y[i])//← J'obtiens une erreur ici
            )
        }
        val lineDataSets = listOf<ILineDataSet>(LineDataSet(entryList,"label"))
        lineChart.data = LineData(lineDataSets)

Puisqu'il est nécessaire de stocker le type Float dans le premier terme de Entry, convertissez l'index en type Float et stockez-le (à la place, stockez les données de date dans le troisième terme).

          :
        //Stockage des données dans Entry
        var entryList = mutableListOf<Entry>()
        for(i in x.indices){
            entryList.add(
                Entry(i.toFloat(), y[i], x[i])
            )
        }
          :

Mais tel quel !

Comme, l'étiquette de l'axe X n'est qu'un index et je ne sais pas quelle heure il est. Vous pouvez afficher l'étiquette en convertissant l'heure en une liste de chaînes et en la spécifiant comme étiquette de l'axe X, comme illustré ci-dessous.

          :
        //Convertir la valeur de l'axe X du type de date en chaîne de caractères et la spécifier comme étiquette de l'axe X
        val xStr = x.map { SimpleDateFormat("M/d H:mm").format(it)}
        lineChart.xAxis.valueFormatter = IndexAxisValueFormatter(xStr)

        val lineDataSets = listOf<ILineDataSet>(LineDataSet(entryList,"label"))
        lineChart.data = LineData(lineDataSets)

[SWIFT] J'ai créé une bibliothèque de graphiques simple pour les applications de smartphone [MP Android Chart Kai]

Application et graphique pour smartphone

Comment rendre MPAndroidChart plus facile à utiliser?

1. Création d'un graphique de série chronologique

Correspondance avec ce package

2. Spécification du format de l'interface utilisateur

Correspondance avec ce package

3. Créer un indice d'outil

Correspondance avec ce package

4. Il existe peu de documents japonais

Correspondance avec ce package

Les choses nécessaires

Méthode d'introduction

1. Introduction de MPAndroidChart

2. Introduction du package CustomMP Android Chart

Aperçu du package

Comment installer le package

Créer un module pour dessiner un graphique linéaire

Créer un module pour dessiner des graphiques à barres

Créer un module pour dessiner des graphiques en chandeliers

Créer un module pour dessiner un graphique circulaire

Création d'une classe pour afficher les conseils d'outils

Créer une classe pour spécifier le format de l'interface utilisateur

Création d'un fichier de mise en page pour les info-bulles

simple_marker_view.xml

colors.xml

comment utiliser

1. Comment mettre en œuvre un graphique linéaire

Implémentation de la mise en page

activity_main.xml

Implémentation du traitement des appels de méthode de création de graphe linéaire

Quand il y a une ligne

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

Lorsque vous souhaitez représenter avec précision des temps non équidistants

Lorsqu'il y a plusieurs lignes

2. Comment mettre en œuvre un graphique à barres

Implémentation de la mise en page

activity_main.xml

Implémentation du code d'exécution

Quand il y a un bâton

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

Lors de l'affichage de plusieurs barres de manière empilée

Lors de l'affichage de plusieurs barres côte à côte

3. Comment implémenter le graphique en chandelier

Implémentation de la mise en page

activity_main.xml

Implémentation du code d'exécution

Lorsque l'axe horizontal est une valeur numérique

Lorsque vous souhaitez créer une série chronologique sur l'axe horizontal

4. Comment mettre en œuvre un graphique circulaire

Implémentation de la mise en page

activity_main.xml

Implémentation du code d'exécution

Comment spécifier le format de l'interface utilisateur

Liste des formats d'interface utilisateur appliqués à l'ensemble du graphique (graphique)

Cette méthode originale de paquet

Échelle d'affichage précise, l'étiquette de temps n'affiche que le maximum et le minimum

Affiche toutes les étiquettes de temps, moins précises

Aucun affichage d'indice d'outil

Afficher les valeurs de l'axe X dans les conseils d'outil

Afficher les valeurs de l'axe Y dans les conseils d'outil

Afficher les valeurs de l'axe X et de l'axe Y dans les conseils d'outil

Format d'affichage de l'heure de l'indice d'outil"j jour H heures"À

Unité de l'axe X de l'indice d'outil"journée"À

Unité de l'axe Y de l'indice d'outil"Cercle"À

Liste des formats d'interface utilisateur appliqués à chaque catégorie (DataSet)

Cette méthode originale de paquet

entier(0e place après la virgule décimale)Afficher avec

Affiché à la 2ème place après la virgule décimale

1ère place après la virgule décimale +"Cercle"Afficher avec

référence

Comment créer un graphique de série chronologique dans MPAndroidChart

Pour les graphiques non chronologiques

Pour les graphiques de séries chronologiques

`simple_marker_view.xml`

`colors.xml`

`activity_main.xml`

`activity_main.xml`

`activity_main.xml`

`activity_main.xml`

`Échelle d'affichage précise, l'étiquette de temps n'affiche que le maximum et le minimum`

`Affiche toutes les étiquettes de temps, moins précises`

`Aucun affichage d'indice d'outil`

`Afficher les valeurs de l'axe X dans les conseils d'outil`

`Afficher les valeurs de l'axe Y dans les conseils d'outil`

`Afficher les valeurs de l'axe X et de l'axe Y dans les conseils d'outil`

`Format d'affichage de l'heure de l'indice d'outil"j jour H heures"À`

`Unité de l'axe X de l'indice d'outil"journée"À`

`Unité de l'axe Y de l'indice d'outil"Cercle"À`

`entier(0e place après la virgule décimale)Afficher avec`

`Affiché à la 2ème place après la virgule décimale`

`1ère place après la virgule décimale +"Cercle"Afficher avec`