[SWIFT] Ich habe eine einfache Grafikbibliothek für Smartphone-Apps erstellt [MP Android Chart Kai]
Smartphone App und Grafik
Wenn Sie das Diagramm in der Android-App anzeigen möchten MPAndroidChart Bibliothek wird oft benutzt. (Es gibt auch eine iOS-Version von ** Charts Library **)
Es ist eine großartige Bibliothek, die vielseitig ist und eine großartige Benutzeroberfläche hat. Aufgrund des Mangels an japanischen Informationen bin ich der Meinung, dass die Schwierigkeit der Implementierung ziemlich hoch ist. Also, ** habe ich ein zusätzliches Paket erstellt, um einfach ein Diagramm zu erstellen! ** **. Github
Sie können ganz einfach ein Diagramm wie das folgende erstellen
(Das Thema ist schwer! (Lacht))
** Dieses Paket basiert auf der Implementierung in Kotlin. Wenn Sie möchten, werde ich eine Java / Swift (iOS) -Version erstellen. Wenn Sie weitere Fragen oder Wünsche zum Hinzufügen von Methoden haben, können Sie diese gerne kommentieren! ** **.
Wie kann ich MPAndroidChart einfacher verwenden?
Ich hatte Probleme mit der Erstellung einer App, die in den folgenden Abschnitten Diagramme mit MPAndroidChart enthielt. ** 1. Erstellen eines Zeitreihendiagramms ** ** 2. Formatspezifikation (insbesondere Farbe) ** ** 3. Erstellen von Tooltipps ** ** 4. Es gibt nur wenige japanische Dokumente **
1. Erstellen eines Zeitreihendiagramms
[Details werden in der Ergänzung angegeben](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) Das Erstellen eines Zeitreihendiagramms erfordert viel Zeit und Mühe, z. B. das Speichern von Daten und das Formatieren von Achsen.
Korrespondenz mit diesem Paket
Ich habe eine Methode für Zeitreihendiagramme erstellt, damit sie mit einfachen Operationen erstellt werden kann.
Auch wenn die Zeit nicht gleichmäßig verteilt ist, wie unten gezeigt
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"),//Nur hier fliegt das Zeitintervall
)
Bei der obigen Methode wird es in gleichen Intervallen nur basierend auf den Indexinformationen aufgezeichnet.
Das Zeitintervall ist auf der horizontalen Achse nicht genau dargestellt.
In diesem Paket haben wir auch einen Anzeigemodus vorbereitet, der auch dann genau zeichnet, wenn die horizontale Achse nicht gleichmäßig verteilt ist.
(Beschriftungen werden nur am Anfang und am Ende angezeigt)
2. UI-Formatspezifikation
In MPAndroidChart ungefähr für die Grafikanzeige ** ① Verfahren zur Dateneingabe ** ** ② Prozess zum Festlegen des UI-Formats ** Es sind zwei Typen erforderlich. Unter dem Gesichtspunkt der Unabhängigkeit ist es wünschenswert, dass diese beiden Arten der Verarbeitung im Code getrennt angegeben werden können.
Wenn Sie jedoch mehrere Y-Achsenwerte wie in einem Diagramm mit unterbrochenen Linien angeben, Wie unten gezeigt, handelt es sich um eine Spezifikationsmethode, bei der die Verarbeitung in ① und ② kompliziert ist.
//Datenspeicherung in Eingabe → ① Dateneingabeverarbeitung
var entryList1 = mutableListOf<Entry>()//1. Zeile
var entryList2 = mutableListOf<Entry>()//Zweite Reihe
for(i in x.indices){
entryList1.add(
Entry(x[i], y1[i])
)
entryList2.add(
Entry(x[i], y2[i])
)
}
//X-Achseneinstellung → ② Verarbeitung der UI-Formatspezifikation
lineChart.xAxis.apply {
isEnabled = true
textColor = Color.BLACK
}
//Einstellung der linken Y-Achse → ② Verarbeitung der UI-Formatspezifikation
lineChart.axisLeft.apply {
isEnabled = true
textColor = Color.BLACK
}
//Einstellung der rechten Y-Achse → ② Verarbeitung der UI-Formatspezifikation
lineChart.axisLeft.apply {
isEnabled = false
}
//LineDataSet(Für jede Zeile)Erstellen Sie eine Liste von → ① Dateneingabeprozess
val lineDataSets = mutableListOf<ILineDataSet>()
//Datenspeicherung für die erste Zeile → ① Dateneingabeverarbeitung
val lineDataSet1 = LineDataSet(entryList1, "linear")
//Farbe der ersten Zeile → ② Verarbeitung der UI-Formatspezifikation
lineDataSet1.color = Color.BLUE
//In Liste speichern → ① Dateneingabeprozess
lineDataSets.add(lineDataSet1)
//Datenspeicherung für die zweite Zeile → ① Dateneingabeverarbeitung
val lineDataSet2 = LineDataSet(entryList2, "square")
//Die Farbe der zweiten Zeile → ② Verarbeitung der UI-Formatspezifikation
lineDataSet2.color = Color.RED
//Speichern Sie die LineDataSet-Liste in LineData → ① Dateneingabeverarbeitung
lineDataSets.add(lineDataSet2)
//Datenspeicherung in LineChart → ① Dateneingabeverarbeitung
lineChart.data = LineData(lineDataSets)
Korrespondenz mit diesem Paket
Das obige Spezifikationsverfahren ist unter dem Gesichtspunkt der Unabhängigkeit und der Lesbarkeit des Codes nicht vorzuziehen. ** - Spezifikationsklasse für das UI-Format (Diagramm und DataSet. Hier finden Sie den Unterschied zwischen ihnen) (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)) ** ** - Dateneingabemethode ** ** ・ Methode zum Zeichnen eines Diagramms basierend auf den obigen UI-Spezifikationen und -Daten ** Die Konfiguration ist so, dass sie unabhängig in der Reihenfolge von angegeben werden kann.
Außerdem ** weiß ich nicht, wie ich das Format angeben soll! Für diejenigen, die sagen ** Auch wenn Sie das Format nicht angeben (kein Argument in den Konstruktor einfügen) Ich habe eine Funktion hinzugefügt, mit der sich meine Subjektivität gut anfühlt (obwohl es ein abstrakter Ausdruck ist ... lol).
Insbesondere für die Farbeinstellung gibt es viele Einstellpunkte und die manuelle Einstellung ist problematisch.
** - Geben Sie die Farbe von Linien und Balken basierend auf Color Universal Design automatisch an. **
** ・ Wenn der Hintergrund schwarz ist (Helligkeit 0,5 oder weniger), werden die Zeichen automatisch in Weiß geändert **
Die Funktion wurde hinzugefügt
3. Erstellen Sie einen Werkzeughinweis
"Werkzeughinweis", der die Details der Daten anzeigt, wenn Sie auf den Datenpunkt tippen
Wenn dies der Fall ist, wird die Sichtbarkeit der Benutzeroberfläche erheblich verbessert.
Das offizielle Dokument beschreibt die Implementierungsmethode jedoch nicht richtig. Die Implementierung muss durch Abtasten erfolgen, während der Beispielcode betrachtet wird.
Korrespondenz mit diesem Paket
Die folgenden Spezifikationen wurden in der Formatspezifikationsklasse ermöglicht, damit Werkzeughinweise einfach angezeigt werden können. ** A. Gibt an, ob Werkzeughinweise angezeigt werden sollen ** Gibt an, ob Werkzeughinweise angezeigt werden sollen
** B. Axiale Richtung der angezeigten Daten (beide X, Y, XY) **
Wählen Sie die axiale Richtung der anzuzeigenden Daten wie in der folgenden Abbildung gezeigt (von links: keine Anzeige, nur X, nur Y, beide XY)
** C. Für Zeitreihendiagramme das Zeitanzeigeformat (z. B. "M / d HH: mm") **
Aktiviert, um das Zeitanzeigeformat anzugeben, wenn die X-Achse eine Zeitreihe ist.
In der folgenden Abbildung ist das Format "d Tag H Stunde" angegeben.
** D. Dateneinheiten (z. B. ° C,%, Pa usw.) **
Zu den angezeigten Daten können Einheiten sowohl für die X-Achse als auch für die Y-Achse hinzugefügt werden.
In der folgenden Abbildung wird die Einheit "Kreis" zur Y-Achse hinzugefügt.
4. Es gibt nur wenige japanische Dokumente
Es kann gesagt werden, dass es keine Artikel gibt, die auf Japanisch umfassend erklärt werden. Insbesondere für das UI-Formatspezifikationssystem gibt es viele Methodeneigenschaften, deren Erklärung im offiziellen englischen Dokument nicht beschrieben ist.
Korrespondenz mit diesem Paket
In diesem Artikel [Liste der Eigenschaften der UI-Formatspezifikation und ein Link mit Änderungen aufgrund der Spezifikation](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) ([Klicken Sie hier, um eine Liste der Eigenschaften der DataSet-UI-Formatspezifikation anzuzeigen.) (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))
Welche Eigenschaft sollte festgelegt werden und wie sich die Diagrammform ändert Ich denke, man kann es leicht mit japanischen + Bildern verfolgen
Dinge notwendig
Bitte erstellen Sie die folgende Entwicklungsumgebung ** ・ Entwicklungs-PC (diesmal wird Windows 10 verwendet) ** ** ・ Android Studio (diesmal wird 4.0.1 verwendet, Android-Version wird nach API26 empfohlen) ** ** - Android-Smartphone zum Bedienen (diesmal wird Pixel 3a verwendet) **
Einführungsmethode
Das Verfahren ist wie folgt ** 1. Einführung von MPAndroidChart ** ** 2. Einführung des CustomMP Android Chart-Pakets **
1. Einführung von MPAndroidChart
Führen Sie MPAndroidChart, eine Grafikzeichnungsbibliothek, in das Projekt ein
In build.gradle (Projekt),
allprojects {
repositories{
:
maven { url 'https://jitpack.io' }
:
Ich werde die Beschreibung hinzufügen.
In build.gradle (Modul: App)
dependencies {
:
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
:
Ich werde die Beschreibung hinzufügen.
Wenn Sie das Projekt mit "Datei-> Projekt schließen" in der Menüleiste schließen und erneut öffnen, Die Bibliothek wird reflektiert.
2. Einführung des CustomMP Android Chart-Pakets
Eine Sammlung von Methoden und Klassen zum einfachen Erstellen des obigen MPAndroidChart-Diagramms. Verpackt als "Custom MP Android Chart". Auf Github hochgeladen
Paketübersicht
Es besteht aus den folgenden 6 Modulen ** ・ LineChartMethods.kt **: Eine Sammlung von Methoden für Liniendiagramme ** ・ BarChartMethods.kt **: Eine Sammlung von Methoden für Balkendiagramme ** ・ CandleStickChartMethods.kt **: Eine Sammlung von Methoden für Candlestick-Diagramme (Diagramme wie Aktiencharts) ** ・ PieChartMethods.kt **: Eine Sammlung von Methoden für Liniendiagramme ** ・ MarkerViews.kt **: Tool-Hinweis-Anzeigeklasse ** ・ ChartFormats.kt **: Ein Modul, das Klassen zum Festlegen von UI-Formaten sammelt.
Auch die im Tool verwendete Layoutdatei Sie müssen auch ** simple_marker_view.xml ** installieren.
So installieren Sie das Paket
Führen Sie die folgenden Schritte aus, um es im Projekt zu installieren und das Diagramm zu erstellen. ** * Es gibt viele manuelle Operationen. Wenn Sie also einen besseren Weg kennen, um ihn bereitzustellen, würde ich es begrüßen, wenn Sie mich unterrichten könnten **
Klicken Sie mit der rechten Maustaste auf den Paketordner direkt unter dem Java-Ordner, wählen Sie Neu → Paket und nennen Sie ihn "Diagramm".
Erstellen eines Moduls zum Zeichnen eines Liniendiagramms
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "LineChartMethods" und wählen Sie LineChartMethods.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen eines Moduls zum Zeichnen von Balkendiagrammen
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "BarChartMethods" und wählen Sie BarChartMethods.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen eines Moduls zum Zeichnen von Candlestick-Diagrammen
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "CandleStickChartMethods" und wählen Sie CandleStickChartMethods.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen eines Moduls zum Zeichnen eines Kreisdiagramms
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "PieChartMethods" und wählen Sie PieChartMethods.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen einer Klasse zum Anzeigen von Werkzeughinweisen
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "MarkerViews" und wählen Sie MarkerViews.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen einer Klasse zum Festlegen des UI-Formats
Klicken Sie mit der rechten Maustaste auf den oben erstellten Diagrammordner, wählen Sie Neu → Kotlin-Datei / Klasse, nennen Sie ihn "ChartFormats" und wählen Sie ChartFormats.kt auf GitHub. Kopieren (/ master / app / src / main / java / com / mongodb / custommpandroidchart / chart).
- Bitte ändern Sie den kommentierten Teil "Ändern gemäß der Projektstruktur" oben im Code entsprechend der Projektstruktur.
Erstellen einer Layoutdatei für QuickInfos
Führen Sie die folgenden Schritte aus, um beim Klicken eine Layoutdatei für Werkzeughinweise zu erstellen.
Klicken Sie mit der rechten Maustaste auf res / layout, wählen Sie New → Layout Resource File und nennen Sie es "simple_marker_view".
Schreiben Sie die erstellte XML-Datei mit dem folgenden Inhalt neu
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>
Fügen Sie den folgenden Inhalt zu res / values / colours.xml hinzu. (Bitte ändern Sie den Farbcode siehe hier entsprechend)
colors.xml
:
<color name="toolTipBgColor">#999999</color>//Hintergrundfarbcode
<color name="toolTipTextColor">#ffffff</color>//Textfarbcode
:
Damit ist die Paketinstallation abgeschlossen.
wie benutzt man
Für jedes Liniendiagramm, Balkendiagramm, Candlestick-Diagramm und Kreisdiagramm Ich werde die Implementierungsmethode erklären.
1. So implementieren Sie ein Liniendiagramm
Ich werde erklären, wie das Liniendiagramm für das Layout (.xml) und den Verarbeitungsabschnitt (.kt) separat implementiert wird.
Layout-Implementierung
Fügen Sie ein Widget für LineChart in Ihr Layout ein (z. B. activity_main.xml), wie unten gezeigt.
activity_main.xml
:
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChartExample"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
:
Implementierung der Aufrufverarbeitung zur Erstellung von Liniendiagrammen
Implementieren Sie den Aufruf der Methode zur Erstellung von Liniendiagrammen in der Kotlin-Datei (z. B. MainActivity.kt). ・ Wenn nur eine Zeile vorhanden ist ・ Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten ・ Wenn es mehrere gibt Ich werde jedes Beispiel separat erklären.
Wenn es eine Zeile gibt
Als Grundfluss ** - Spezifikation des Diagrammformats ** ** - DataSet-Format angeben ** ** ・ Speichern Sie Daten in Entry mit der Methode makeLineChartData ** ** - Zeichnen Sie ein Diagramm mit der setupLineChart-Methode ** Es wird sein.
//Erstellung von Beispieldaten zur Anzeige//
val x = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//X-Achsendaten
val y = x.map{it*it}//Daten der Y-Achse (Quadrat der X-Achse)
//Diagrammformat
var lineChartFormat = LineChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
"linear" to makeLineChartData(x, y)
)
//② ～ ⑦ Grafikerstellung
setupLineChart(allLinesEntries, findViewById(R.id.lineChartExample), lineChartFormat, lineDataSetFormat, context)
Das Diagrammformat und das DataSet-Format geben die Benutzeroberfläche des Diagramms an. [Details werden später beschrieben](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)
Wenn Sie den obigen Code ausführen, sehen Sie ein Diagramm wie das folgende.
Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten
Wenn Sie Zeitreihen für die horizontale Achse erstellen möchten, verwenden Sie die Methode, um Daten in Entry zu speichern. makeLineChartData() → makeDateLineChartData() Ändern
//Erstellung von Beispieldaten zur Anzeige//
//X-Achsendaten(Zeit)
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)//Daten der Y-Achse(Numerischer Wert)
//Diagrammformat
var lineChartFormat = LineChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
"linear" to makeDateLineChartData(x, y, lineChartFormat.timeAccuracy)
)
//② ～ ⑦ Grafikerstellung
setupLineChart(allLinesEntries, findViewById(R.id.lineChartExample), lineChartFormat, lineDataSetFormat, context)
Wenn Sie nicht äquidistante Zeiten genau darstellen möchten
[Wie oben erwähnt](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), da die obige Methode die Datenpunkte in X-Richtung in gleichen Intervallen darstellt. Wenn das Datenerfassungsintervall nicht konstant ist, wird die Zeit auf der horizontalen Achse nicht genau dargestellt.
Wenn Sie in einem solchen Fall die Zeit genau ausdrücken möchten, verwenden Sie das Diagrammformat. timeAccuracy = true Angeben.
//Diagrammformat
var lineChartFormat = LineChartFormat(
timeAccuracy = true,
/*Geben Sie hier andere Diagrammformate an*/
)
- Beschriftungen werden nur am Anfang und am Ende angezeigt
Wenn es mehrere Zeilen gibt
Der Unterschied zur Zeit von einem
- Geben Sie das DataSet-Format für die Anzahl der Zeilen an ・ Die Daten für die Anzahl der Zeilen werden im Eintrag gespeichert Es wird sein.
//Erstellung von Beispieldaten zur Anzeige//
val x = listOf<Float>(1f, 2f, 3f, 5f, 8f, 13f, 21f, 34f)//X-Achsendaten
val y1 = x.map{it}//Daten der Y-Achse 1 (Quadrat der X-Achse)
val y2 = x.map{it*it}//Daten der Y-Achse 2 (Quadrat der X-Achse)
//Diagrammformat
var lineChartFormat = LineChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(/*Geben Sie hier das DataSet-Format an*/),
"square" to LineDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
"linear" to makeLineChartData(x, y1),
"square" to makeLineChartData(x, y2)
)
//② ～ ⑦ Grafikerstellung
setupLineChart(allLinesEntries, lineChart, lineChartFormat, lineDataSetFormat, context)
Wenn Sie die Methode zum Speichern von Daten auf makeDateLineChartData festlegen, können Sie ein Diagramm mit mehreren Linien und Zeitreihen erstellen.
2. So implementieren Sie ein Balkendiagramm
Die Implementierungsmethode des Balkendiagramms wird für das Layout (.xml) und den Verarbeitungsabschnitt (.kt) separat erläutert.
Layout-Implementierung
Betten Sie wie bei LineChart das Widget für BarChart in das Layout ein (z. B. 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"/>
:
Implementierung des Ausführungscodes
Implementieren Sie den Aufruf der Methode zur Erstellung von Balkendiagrammen in der Kotlin-Datei (z. B. MainActivity.kt). ・ Wenn es nur einen Stock gibt ・ Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten ・ Wenn mehrere Balken gestapelt angezeigt werden ・ Wenn mehrere Balken nebeneinander angezeigt werden Ich werde jedes Beispiel separat erklären.
Wenn es einen Stock gibt
Es ist fast das gleiche wie beim Faltliniendiagramm. Ich denke, Sie können einfach den Klassennamen "Line ~" in "Bar ~" ändern.
//Erstellung von Beispieldaten zur Anzeige//
val x = listOf<Float>(1f, 2f, 3f, 4f, 6f, 7f, 8f, 9f)//X-Achsendaten
val y = x.map{it*it}//Daten der Y-Achse (Quadrat der X-Achse)
//Diagrammformat
var barChartFormat = BarChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var barDataSetFormat = mapOf(
"square" to BarDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
"square" to makeBarChartData(x, y)
)
//② ～ ⑦ Grafikerstellung
setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)
Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten
Wenn Sie Zeitreihen für die horizontale Achse erstellen möchten, verwenden Sie die Methode, um Daten in Entry zu speichern. makeBarChartData() → makeDateBarChartData() Ändern
- Im Gegensatz zum Liniendiagramm kann die Eigenschaft timeAccuracy nicht angegeben werden.
//Erstellung von Beispieldaten zur Anzeige//
//X-Achsendaten(Zeit)
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)//Daten der Y-Achse(Numerischer Wert)
//Diagrammformat
var barChartFormat = BarChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var barDataSetFormat = mapOf(
"square" to BarDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
"square" to makeDateBarChartData(x, y)
)
//② ～ ⑦ Grafikerstellung
setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)
Wenn mehrere Balken gestapelt angezeigt werden
Der Unterschied zur Zeit von einem
-Die Y-Achsendaten, die in Entry gespeichert werden sollen, sind die Daten, die Sie in List <MutableList
//Erstellung von Beispieldaten zur Anzeige//
val x = listOf<Float>(1f, 2f, 3f, 4f, 6f, 7f, 8f, 9f)//X-Achsendaten
val y = x.map{ mutableListOf(it, it*it)}//Daten der Y-Achse (1 Element:X-Achse 1. Potenz, 2 Stück:X im Quadrat)
//Diagrammformat
var barChartFormat = BarChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var barDataSetFormat = mapOf(
"stack" to BarDataSetFormat(
stackLabels = listOf("linear","square"),
/*Geben Sie hier andere DataSet-Formate an*/
)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
"stack" to makeStackBarChartData(x, y)
)
//② ～ ⑦ Grafikerstellung
setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)
Bei der Anzeige mehrerer Balken nebeneinander
Wie bei mehreren Faltlinien beträgt der Unterschied zum Fall einer Linie
- Geben Sie das DataSet-Format für die Anzahl der Balken an ・ Die Daten für die Anzahl der Balken werden im Eintrag gespeichert Es wird sein. ** * Bitte beachten Sie, dass es nur verwendet werden kann, wenn der horizontale Achsenabstand konstant ist **
//Erstellung von Beispieldaten zur Anzeige
val x = listOf<Float>(1f, 2f, 3f, 4f, 5f, 6f, 7f, 8f)//X-Achsendaten
val y1 = x.map{it}//Daten der Y-Achse 1 (Quadrat der X-Achse)
val y2 = x.map{it*it}//Daten der Y-Achse 2 (Quadrat der X-Achse)
//Diagrammformat
var barChartFormat = BarChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var barDataSetFormat = mapOf(
"linear" to BarDataSetFormat(/*Geben Sie hier das DataSet-Format an*/),
"square" to BarDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allBarsEntries: MutableMap<String, MutableList<BarEntry>> = mutableMapOf(
"linear" to makeBarChartData(x, y1),
"square" to makeBarChartData(x, y2)
)
//② ～ ⑦ Grafikerstellung
setupBarChart(allBarsEntries, barChart, barChartFormat, barDataSetFormat, context)
3. So implementieren Sie ein Candlestick-Diagramm
"Rosenfußdiagramm" ist ein Diagramm, das in Aktiencharts verwendet wird. Kann auch als Ersatz für ein Box-Bart-Diagramm verwendet werden
Die Implementierungsmethode wird für das Layout (.xml) und den Verarbeitungsabschnitt (.kt) separat erläutert.
Layout-Implementierung
Betten Sie wie bei LineChart das Widget für CandleStickChart in das Layout ein (z. B. 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"/>
:
Implementierung des Ausführungscodes
Implementieren Sie den Aufruf der Erstellungsmethode für Candlestick-Diagramme in der Kotlin-Datei (z. B. MainActivity.kt). ・ Wenn die horizontale Achse ein numerischer Wert ist ・ Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten Ich werde jedes Beispiel separat erklären.
Wenn die horizontale Achse ein numerischer Wert ist
Beachten Sie, dass Sie beim Speichern von Daten im Eintrag fünf Arten von Argumenten angeben müssen: X-Achsenwert, Y-Maximalwert, Y-Minimalwert, Y-Startwert und Y-Endwert.
//Erstellung von Beispieldaten zur Anzeige//
val x = listOf<Float>(2f, 3f, 4f, 5f, 6f, 7f, 8f, 9f)//X-Achsendaten
val yHigh = x.map{it * 2}//Daten der Y-Achse (Maximalwert)
val yLow = x.map{it}//Daten der Y-Achse (Mindestwert)
val yOpen = x.map{it + 1}//Daten der Y-Achse (Startwert)
val yClose = x.map{it + 2}//Daten der Y-Achse (Endwert)
//Diagrammformat
var candleChartFormat = CandleChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format(Kategoriename Karte)
var candleDataSetFormat = CandleDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val candleEntries = makeCandleChartData(x, yHigh, yLow, yOpen, yClose)
//② ～ ⑦ Grafikerstellung
setupCandleStickChart(candleEntries, candleStickChart, candleChartFormat, candleDataSetFormat, context)
Wenn Sie die Zeitreihe der horizontalen Achse erstellen möchten
Wenn Sie Zeitreihen für die horizontale Achse erstellen möchten, verwenden Sie die Methode, um Daten in Entry zu speichern. makeCandleChartData() → makeDateCandleChartData() Ändern
- Die TimeAccuracy-Eigenschaft kann nicht angegeben werden
//Erstellung von Beispieldaten zur Anzeige//
//X-Achsendaten(Zeit)
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)//Zur Datengenerierung auf der Y-Achse
val yHigh = ySeed.map{it * 2}//Daten der Y-Achse (Maximalwert)
val yLow = ySeed.map{it}//Daten der Y-Achse (Mindestwert)
val yOpen = ySeed.map{it + 1}//Daten der Y-Achse (Startwert)
val yClose = ySeed.map{it + 2}//Daten der Y-Achse (Endwert)
//Diagrammformat
var candleChartFormat = CandleChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format
var candleDataSetFormat = CandleDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
//① Datenspeicherung im Eintrag
val candleEntries = makeDateCandleChartData(x, yHigh, yLow, yOpen, yClose)
//② ～ ⑦ Grafikerstellung
setupCandleStickChart(candleEntries, candleStickChart, candleChartFormat, candleDataSetFormat, context)
4. So implementieren Sie ein Kreisdiagramm
Die Implementierungsmethode des Kreisdiagramms wird für das Layout (.xml) und den Verarbeitungsteil (.kt oder .java) separat erläutert.
Layout-Implementierung
Betten Sie wie bei LineChart das Widget für PieChart in das Layout ein (z. B. 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"/>
:
Implementierung des Ausführungscodes
Implementieren Sie den Aufruf der Methode zur Erstellung von Kreisdiagrammen in der Kotlin-Datei (z. B. MainActivity.kt).
//Erstellung von Beispieldaten zur Anzeige//
val dimensions = listOf("A", "B", "C", "D")//Name des geteilten Kreises(Zeichenfolgentyp)
val values = listOf(1f, 2f, 3f, 4f)//Die Größe des Teilkreises(Float-Typ)
//Diagrammformat
var pieChartFormat = PieChartFormat(/*Spezifikation des Diagrammformats hier*/)
//DataSet-Format
var pieDataSetFormat = PieDataSetFormat(/*Geben Sie hier das DataSet-Format an*/)
//① Datenspeicherung im Eintrag
val pieEntries = makePieChartEntries(dimensions, values)
//② ～ ⑦ Grafikerstellung
setupPieChart(pieEntries, pieChart, "PieChart", pieChartFormat, pieDataSetFormat)
So legen Sie das UI-Format fest
Ich werde erklären, was für das gesamte Diagramm (Diagramm) und was für jede Kategorie (DataSet) separat gilt.
Für die Anwendungsmethode kann jeder Eigenschaftsinhalt angegeben werden, indem dem Konstruktor ein Argument gegeben wird, wie unten gezeigt. (Wenn nicht angegeben, [Vorheriges Kapitel "Verwendung"](https://qiita.com/c60evaporator/items/b8f8c83dd3630c0091cf#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3 Die Benutzeroberfläche wird in% 95)) angezeigt.
//Erstellung von Beispieldaten zur Anzeige//
//X-Achsendaten(Zeit)
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)//Y-Achsendaten 1 (USA)
val y2 = listOf(0.4f, 0.7f, 1.2f, 2.3f, 6.1f, 11.2f, 13.4f)//Daten der Y-Achse 2 (China)
val y3 = listOf(3.1f, 5.4f, 4.8f, 4.8f, 5.7f, 4.4f, 5.0f)//Daten der Y-Achse 3 (Japan)
val y4 = listOf(1.6f, 2.6f, 1.9f, 2.8f, 3.4f, 3.4f, 4.0f)//Y-Achsendaten 4 (Deutschland)
///////////Geben Sie hier das Diagrammformat an///////////
var lineChartFormat = LineChartFormat(
legendTextSize = 10f,
description = "Veränderungen des BIP der wichtigsten Länder",
descriptionTextSize = 15f,
descriptionYOffset = -10f,
bgColor = Color.DKGRAY,
xAxisDateFormat = SimpleDateFormat("JJJJ Jahr"),
toolTipDateFormat = SimpleDateFormat("JJJJ Jahr"),
toolTipDirection = "xy",
toolTipUnitY = "Billionen Dollar"
)
///////////Geben Sie hier das DataSet-Format an(Kategoriename Karte)///////////
var lineDataSetFormat = mapOf(
"Amerika" to LineDataSetFormat(//DataSet-Formatspezifikation für Zeile 1
lineColor = UNIVERSAL_BLUE,
lineWidth = 2f
),
"China" to LineDataSetFormat(//DataSet-Formatspezifikation für Zeile 2
lineColor = UNIVERSAL_RED,
lineWidth = 2f
),
"Japan" to LineDataSetFormat(//DataSet-Formatspezifikation für Zeile 3
lineColor = UNIVERSAL_SKYBLUE,
lineWidth = 2f
),
"Deutschland" to LineDataSetFormat(//DataSet-Formatspezifikation für Zeile 4
lineColor = Color.LTGRAY,
lineWidth = 2f
)
)
//① Datenspeicherung im Eintrag(Kategoriename Karte)
val allLinesEntries: MutableMap<String, MutableList<Entry>> = mutableMapOf(
"Amerika" to makeDateLineChartData(x, y1, false),
"China" to makeDateLineChartData(x, y2, false),
"Japan" to makeDateLineChartData(x, y3, false),
"Deutschland" to makeDateLineChartData(x, y4, false)
)
//② ～ ⑦ Grafikerstellung
setupLineChart(allLinesEntries, lineChart, lineChartFormat, lineDataSetFormat, context)
Es gibt einige Implementierungsbeispiele in GitHub MainActivity.kt ( Insbesondere seit den letzten 4 Methoden) denke ich, dass es einfacher zu verstehen sein wird, wenn Sie sich darauf beziehen können.
Liste der UI-Formate, die auf das gesamte Diagramm angewendet werden (Diagramm)
Unten finden Sie eine Liste der Eigenschaften, die im Diagrammformat angegeben werden können.
** Der Link in der Spalte "Eigenschaftsname in MPAndroidChart" ** zeigt, wie sich die Benutzeroberfläche tatsächlich ändert (separater Artikel).
- In Bezug auf die ursprünglichen Eigenschaften dieses Pakets, die nicht mit MPAndroidChart kompatibel sind, werden Änderungen in diesem Artikel separat aufgeführt.
| Anwendbares Ziel | Artikel zu ändern | Eigenschaftsname im Diagrammformat | Schimmel | Bemerkungen | Eigenschaftsname in MPAndroidChart | Gestrichelten Linie | Balkendiagramm | Kerzenfuß | Kuchendiagramm |
|---|---|---|---|---|---|---|---|---|---|
| Gebrauchsanweisung | Form markieren | legendFormat | Legend.LegendForm? | nullならGebrauchsanweisung表示なし | .legend.form | 〇 | 〇 | 〇 | 〇 |
| Gebrauchsanweisung | Buchstabenfarbe | legentTextColor | Int? | Standard, wenn null(schwarz) | .legend.textColor | 〇 | 〇 | 〇 | 〇 |
| Gebrauchsanweisung | Schriftgröße | legendTextSize | Float? | Standard, wenn null | .legend.textSize | 〇 | 〇 | 〇 | 〇 |
| Beschreibungsetikett | Zeichenkette anzeigen | description | String? | nullならBeschreibungsetikettなし | .description.text | 〇 | 〇 | 〇 | 〇 |
| Beschreibungsetikett | Buchstabenfarbe | descriptionTextColor | Int? | Standard, wenn null(schwarz) | .description.textColor | 〇 | 〇 | 〇 | 〇 |
| Beschreibungsetikett | Schriftgröße | descriptionTextSize | Float? | Standard, wenn null | .description.textSize | 〇 | 〇 | 〇 | 〇 |
| Beschreibungsetikett | Feineinstellung der horizontalen Position | descriptionXOffset | Float? | Standard, wenn null | .description.xOffset | 〇 | 〇 | 〇 | 〇 |
| Beschreibungsetikett | Feineinstellung der vertikalen Position | descriptionYOffset | Float? | Standard, wenn null | .description.yOffset | 〇 | 〇 | 〇 | 〇 |
| Hintergrund | Hintergrund色 | bgColor | Int? | Standard, wenn null(Weiß) | .setBackgroundColor() | 〇 | 〇 | 〇 | 〇 |
| Berühren Sie die Bedienung | Gültig ungültig | touch | Boolean | .setTouchEnabled() | 〇 | 〇 | 〇 | ||
| X-Achsenbeschriftung | Mit oder ohne Anzeige | xAxisEnabled | Boolean | .xAxis.isEnabled | 〇 | 〇 | 〇 | ||
| X-Achsenbeschriftung | Buchstabenfarbe | xAxisTextColor | Int? | Standard, wenn null(schwarz) | .xAxis.textColor | 〇 | 〇 | 〇 | |
| X-Achsenbeschriftung | Schriftgröße | xAxisTextSize | Float? | Standard, wenn null | .xAxis.textSize | 〇 | 〇 | 〇 | |
| X-Achsenbeschriftung | Zeitanzeigeformat | xAxisDateFormat | SimpleDateFormat? | M wenn null/d H:mm | - | 〇 | 〇 | 〇 | |
| Beschriftung der linken Y-Achse | Mit oder ohne Anzeige | yAxisLeftEnabled | Boolean | .axisLeft.isEnabled | 〇 | 〇 | 〇 | ||
| Beschriftung der linken Y-Achse | Buchstabenfarbe | yAxisLeftTextColor | Int? | Standard, wenn null(schwarz) | .axisLeft.textColor | 〇 | 〇 | 〇 | |
| Beschriftung der linken Y-Achse | Schriftgröße | yAxisLeftTextSize | Float? | Standard, wenn null | .axisLeft.textSize | 〇 | 〇 | 〇 | |
| Beschriftung der linken Y-Achse | Untere Grenze anzeigen | yAxisLeftMin | Float? | Wenn null, gibt es keine Untergrenze | .axisLeft.axisMinimum | 〇 | 〇 | 〇 | |
| Beschriftung der linken Y-Achse | Obergrenze anzeigen | yAxisLeftMax | Float? | Wenn null, gibt es keine Obergrenze | .axisLeft.axisMaximam | 〇 | 〇 | 〇 | |
| Beschriftung der rechten Y-Achse | Mit oder ohne Anzeige | yAxisRightEnabled | Boolean | .axisRight.isEnabled | 〇 | 〇 | 〇 | ||
| Beschriftung der rechten Y-Achse | Buchstabenfarbe | yAxisRightTextColor | Int? | Standard, wenn null(schwarz) | .axisRight.textColor | 〇 | 〇 | 〇 | |
| Beschriftung der rechten Y-Achse | Schriftgröße | yAxisRightTextSize | Float? | Standard, wenn null | .axisRight.textSize | 〇 | 〇 | 〇 | |
| Beschriftung der rechten Y-Achse | Untere Grenze anzeigen | yAxisRightMin | Float? | Wenn null, gibt es keine Untergrenze | .axisRight.axisMinimum | 〇 | 〇 | 〇 | |
| Beschriftung der rechten Y-Achse | Obergrenze anzeigen | yAxisRightMax | Float? | Wenn null, gibt es keine Obergrenze | .axisRight.axisMaximam | 〇 | 〇 | 〇 | |
| Erweiterungsoperation | Expansionsrichtung | zoomDirection | String? | "x", "y", "xy" Wenn null, ist die Erweiterung ungültig |
.isScaleXEnabled .isScaleYEnabled .setScaleEnabled() |
〇 | 〇 | 〇 | |
| Erweiterungsoperation | Quetschvorgang effektiv | zoomPinch | Boolean | .setPinchZoom() | 〇 | 〇 | 〇 | ||
| Tooltipps | Zu zeigende Achse | toolTipDirection | String? | "x", "y", "xy" nullならTooltippsなし |
.marker | 〇 | 〇 | 〇 | |
| Tooltipps | Format für Zeitreihendiagramme | toolTipDateFormat | SimpleDateFormat? | M wenn null/d H:mm | .marker | 〇 | 〇 | 〇 | |
| Tooltipps | X-Achseneinheit | toolTipUnitX | String | Der Standardwert ist keine Einheit("") | .marker | 〇 | 〇 | 〇 | |
| Tooltipps | Y-Achseneinheit | toolTipUnitY | String | Der Standardwert ist keine Einheit("") | .marker | 〇 | 〇 | 〇 | |
| X-Achsen-Anzeigemethode | Genauigkeit der Zeitachsenskala | timeAccuracy | Boolean | Wenn True, wird die Zeitachse genau angezeigt(Etiketten sind nur maximal und minimal) | - | 〇 | |||
| Etikette | Buchstabenfarbe | labelColor | Int? | Standard, wenn null(schwarz) | .setEntryLabelColor() | 〇 | |||
| Etikette | Schriftgröße | labelTextSize | Float? | Standard, wenn null | .setEntryLabelTextSize() | 〇 | |||
| Zentraler Text | Zeichenkette anzeigen | centerText | String? | Wenn null, kein zentraler Text | .centerText | 〇 | |||
| Zentraler Text | Buchstabenfarbe | centerTextColor | Int? | Standard, wenn null(schwarz) | .setCenterTextColor() | 〇 | |||
| Zentraler Text | Schriftgröße | centerTextSize | Float? | Standard, wenn null | .setCenterTextSize() | 〇 | |||
| Zentrales Loch | Lochradius | holeRadius | Float? | Standard, wenn null | .holeRadius | 〇 | |||
| Zentrales Loch | Breite des hellen Bereichs um das Loch | transparentCircleRadius | Float? | Standard, wenn null | .transparentCircleRadius | 〇 | |||
| Zentrales Loch | Lochfüllfarbe | holeColor | Int? | Standard, wenn null(schwarz) | .setHoleColor() | 〇 | |||
| ______________ | ____________ | ________________ |
Dieses Paket ursprüngliche Methode
xAxisDateFormat Ändern Sie das Zeitanzeigeformat der X-Achse (nur für Zeitreihendiagramme ist die Standardeinstellung "M / d H: mm").
var lineChartFormat = LineChartFormat(xAxisDateFormat = SimpleDateFormat("d Tag H Uhr"))
timeAccuracy [Wie oben](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), gibt die Genauigkeit der Zeitachsenskala an (nur Zeitreihen-Strichliniendiagramm)
Genaue Anzeige der Skala, Zeitbeschriftung zeigt nur Maximum und Minimum an
var lineChartFormat = LineChartFormat(timeAccuracy=true)
Zeigt alle Zeitangaben an, die weniger genau sind
var lineChartFormat = LineChartFormat(timeAccuracy=false)
toolTipDirection
Keine Werkzeughinweisanzeige
var lineChartFormat = LineChartFormat(toolTipDirection=null)
X-Achsenwerte in Werkzeughinweisen anzeigen
var lineChartFormat = LineChartFormat(toolTipDirection="x")
Werte der Y-Achse in Werkzeughinweisen anzeigen
var lineChartFormat = LineChartFormat(toolTipDirection="y")
Zeigen Sie sowohl X-Achsen- als auch Y-Achsenwerte in Werkzeughinweisen an
var lineChartFormat = LineChartFormat(toolTipDirection="xy")
toolTipDateFormat Ändern Sie das Zeitanzeigeformat des Werkzeughinweises (nur für Zeitreihendiagramme ist die Standardeinstellung "M / d H: mm").
Anzeigeformat für die Tool-Hinweiszeit"d Tag H Uhr"Zu
var lineChartFormat = LineChartFormat(
toolTipDirection="xy",
toolTipDateFormat = SimpleDateFormat("d Tag H Uhr")
)
toolTipUnitX Gibt die Einheit an, die der X-Achsenanzeige des Werkzeughinweises hinzugefügt werden soll (Standard ist keine Einheit).
X-Achsen-Einheit des Werkzeughinweises"Tag"Zu
var lineChartFormat = LineChartFormat(
toolTipDirection="xy",
toolTipUnitX = "Tag"
)
toolTipUnitY Gibt die Einheit an, die der Y-Achsenanzeige des Werkzeughinweises hinzugefügt werden soll (Standard ist keine Einheit).
Y-Achseneinheit des Werkzeughinweises"Kreis"Zu
var lineChartFormat = LineChartFormat(
toolTipDirection="xy",
toolTipUnitY = "Kreis"
)
Liste der auf jede Kategorie angewendeten UI-Formate (DataSet)
Unten finden Sie eine Liste von Eigenschaften, die im DataSet-Format angegeben werden können (angegeben für jede Zeile, jeden Balken usw.).
** Der Link in der Spalte "Eigenschaftsname in MPAndroidChart" ** zeigt, wie sich die Benutzeroberfläche tatsächlich ändert (separater Artikel).
- In Bezug auf die ursprünglichen Eigenschaften dieses Pakets, die nicht mit MPAndroidChart kompatibel sind, werden Änderungen in diesem Artikel separat aufgeführt.
| Anwendbares Ziel | Artikel zu ändern | Eigenschaftsname im DataSet-Format | Schimmel | Bemerkungen | Eigenschaftsname in MPAndroidChart | Gestrichelten Linie | Balkendiagramm | Kerzenfuß | Kuchendiagramm |
|---|---|---|---|---|---|---|---|---|---|
| Wertanzeige | Wertanzeigeの有無 | drawValue | Boolean | .setDrawValues() | 〇 | 〇 | 〇 | 〇 | |
| Wertanzeige | Wertanzeigeの文字色 | valueTextColor | Int? | Standard, wenn null(schwarz) | .valueTextColor | 〇 | 〇 | 〇 | 〇 |
| Wertanzeige | Wertanzeigeの文字サイズ | valueTextSize | Float? | Standard, wenn null | .valueTextSize | 〇 | 〇 | 〇 | 〇 |
| Wertanzeige | Wertanzeigeのフォーマット | valueTextFormatter | String? | Standard, wenn null | .valueFormatter | 〇 | 〇 | 〇 | 〇 |
| Achse | 左右Achseどちらを使用するか | axisDependency | YAxis.AxisDependency? | nullなら左YAchse | .axisDependency | 〇 | 〇 | ||
| Linie | Linieの色 | lineColor | Int? | Standard, wenn null(hellblau) | .color | 〇 | |||
| Linie | Breite | lineWidth | Float? | Standard, wenn null | .lineWidth | 〇 | |||
| Linie | Komplementäre Methode | fittingMode | LineDataSet.Mode? | Standard, wenn null(直Linie補完) | .mode | 〇 | |||
| Datenpunkt | Mit oder ohne Anzeige | drawCircles | Boolean | .setDrawCircles() | 〇 | ||||
| Datenpunkt | Rahmenfarbe | circleColor | Int? | Standard, wenn null(hellblau) | .setCircleColor() | 〇 | |||
| Datenpunkt | Rahmenradius | circleRadius | Float? | Standard, wenn null | .circleRadius | 〇 | |||
| Datenpunkt | Lochfüllfarbe | circleHoleColor | Int? | Standard, wenn null(Weiß) | .circleHoleRadius | 〇 | |||
| Datenpunkt | Lochradius | circleHoleRadius | Float? | Standard, wenn null | .circleHoleColor | 〇 | |||
| Stange | Stangeの色 | barColor | Int? | Standard, wenn null(hellblau) | .color | Anders als Stapeln | |||
| Stange | 各StapelStangeの色リスト | barColors | List |
.colors | Stapel | ||||
| Stange | StapelStangeのカテゴリ名 | stackLabels | List |
Standard, wenn null(Füllen Sie den Namen des Etiketts aus) | .stackLabels | Stapel | |||
| Dünne Kerzenlinie | Linienfarbe | shadowColor | Int | .shadowColor | 〇 | ||||
| Dünne Kerzenlinie | Breite | shadowWidth | Float? | Standard, wenn null | .shadowWidth | 〇 | |||
| Dicke Kerzenlinie | Farbe beim Abnehmen | decreasingColor | Int | .decreasingColor | 〇 | ||||
| Dicke Kerzenlinie | Füllformat beim Verringern | decreasingPaint | Paint.Style? | Wenn null, gibt es eine Füllung | .decreasingPaintStyle | 〇 | |||
| Dicke Kerzenlinie | Farbe beim Erhöhen | increasingColor | Int? | Keine Farbe, wenn null | .increasingColor | 〇 | |||
| Dicke Kerzenlinie | Füllformat beim Erhöhen | increasingPaint | Paint.Style? | Wenn null, keine Füllung | .increasingPaintStyle | 〇 | |||
| Geteilter Kreis | Geteilter Kreisの色 | colors | List |
.colors | 〇 | ||||
| ______________ | ____________ | ________________ |
Dieses Paket ursprüngliche Methode
valueTextFormatter Gibt das Format der Werteanzeige an (Geben Sie in MPAndroidChart durch Überschreiben in der ValueFormatter-Klasse an, in diesem Paket jedoch nach Zeichenfolgentyp.)
ganze Zahl(0. Stelle nach dem Dezimalpunkt)Anzeige mit
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(
drawValue = true,
valueTextSize = 12f,
valueTextFormatter = "%.0f"
)
)
Wird an zweiter Stelle nach dem Dezimalpunkt angezeigt
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(
drawValue = true,
valueTextSize = 12f,
valueTextFormatter = "%.2f"
)
)
1. Platz nach dem Dezimalpunkt +"Kreis"Anzeige mit
var lineDataSetFormat = mapOf(
"linear" to LineDataSetFormat(
drawValue = true,
valueTextSize = 12f,
valueTextFormatter = "%.1f Yen"
)
)
Referenz
So erstellen Sie ein Zeitreihendiagramm in MPAndroidChart
Für Nicht-Zeitreihendiagramme
Für Diagramme, die keine Zeitreihen sind (X-Achse ist eine Float-Typ-Nummer)
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]))
}
Wenn Sie den X-Achsenwert im ersten Term der Eingabe und den Y-Achsenwert im zweiten Term eingeben, stimmt er mit dem eingegebenen X-Achsenwert überein.
val lineDataSets = ListOf<ILineDataSet>(LineDataSet())
lineChart.data = LineData(lineDataSets)
In diesem Fall werden beide Achsen wie in der folgenden Abbildung dargestellt korrekt dargestellt.
Für Zeitreihendiagramme
Wenn die X-Achse eine Datumsnummer vom Typ Datum (java.util.Date) ist, kann der Wert der X-Achse im ersten Term der Eingabe nicht eingegeben werden.
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)
//Datenspeicherung im Eintrag
var entryList = mutableListOf<Entry>()
for(i in x.indices){
entryList.add(
Entry(x[i], y[i])//← Ich erhalte hier eine Fehlermeldung
)
}
val lineDataSets = listOf<ILineDataSet>(LineDataSet(entryList,"label"))
lineChart.data = LineData(lineDataSets)
Da der Float-Typ im ersten Term des Eintrags gespeichert werden muss, konvertieren Sie den Index in den Float-Typ und speichern Sie ihn (speichern Sie stattdessen die Datumsdaten im dritten Term).
:
//Datenspeicherung im Eintrag
var entryList = mutableListOf<Entry>()
for(i in x.indices){
entryList.add(
Entry(i.toFloat(), y[i], x[i])
)
}
:
Aber wie es ist
!
Das X-Achsen-Label ist nur ein Index und ich weiß nicht, wie spät es ist. Sie können die Beschriftung anzeigen, indem Sie die Zeit in eine Zeichenfolgenliste konvertieren und wie unten gezeigt als Beschriftung für die X-Achse angeben.
:
//Konvertieren Sie den X-Achsenwert vom Datumstyp in eine Zeichenfolge und geben Sie ihn als X-Achsenbeschriftung an
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)
Recommended Posts