androidアプリ上に表示したチャート(グラフ)を動的に更新する方法を紹介します。グラフの情報がリアルタイムに変化するアプリなどで活用できます。
Androidでチャート表示する方法
以下記事でAndroidでチャートを扱う方法を紹介しています。
オープンソースライブラリMPAndroidChartを使用しています。
本記事は以下記事の応用にあたるので、まだチャートを扱ったことない方は下記事から読むことを推奨します。
チャート更新のサンプル
本記事では、チャート内要素の値更新、要素の追加、要素の全削除の方法を紹介します。
以下の命名で各関数を作成しました。
- チャート内「要素の数値」を更新：fun changeVal()
- チャート内「要素」を追加：fun addElement()
- チャート内「全要素」を削除：fun resetChart()
上の各関数をボタンクリックなどのイベント等で呼び出すようにしてください。
本記事では線グラフと円グラフを扱います。
(使用頻度が高めで、特色が異なるので)
サンプル：チャート(線グラフ)の場合
XMLは以下の通り。
<!-- Chart：線グラフ -->
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/chartLine"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"/>
Kotlinは以下の通り。
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
// ランダム値生成用
private val range = (0..10)
// 線グラフ用
private lateinit var entryLine:ArrayList<Entry>
private lateinit var datasetLine:LineDataSet
private lateinit var linedata:LineData
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
val view = binding.root
setContentView(view)
// チャート表示：線グラフ-------------------------------------------
// 手順：①データを用意 ②DataSetにデータ群を入れる ③DataにDatasetを追加 ④チャートのデータにDataを入れる
//①
entryLine = ArrayList<com.github.mikephil.charting.data.Entry>()
//②
datasetLine = LineDataSet(entryLine, "Element1")
//③
linedata = LineData(datasetLine)
//④
binding.chartLine.data = linedata
binding.chartLine.setBackgroundColor(Color.rgb(255,255, 200))
}
// チャート内数値の変更
fun changeVal(){
// 線グラフ ------------------------------------------
try{
// 最後尾要素の値を更新する
entryLine[entryLine.count() - 1] = Entry(entryLine.count().toFloat() - 1, range.random().toFloat())
// DataSet,Data,グラフ表示の更新
datasetLine = LineDataSet(entryLine, datasetLine.label)
linedata = LineData(datasetLine)
binding.chartLine.data = linedata
binding.chartLine.invalidate()
}catch(e:java.lang.Exception){
// グラフ内に要素がない
}
}
// チャート内要素数の変更
fun addElement(){
// 線グラフ ------------------------------------------
//linedata.clearValues()
// 要素を追加(ランダム値)
//entryLine.add(Entry(2f, 9f))
//entryLine.add(Entry(Math.random().toFloat(), Math.random().toFloat()))
entryLine.add(Entry(entryLine.count().toFloat(), range.random().toFloat()))
Log.d("test", "entryline:"+entryLine[entryLine.count()-1].toString())
datasetLine = LineDataSet(entryLine, "Element1")
linedata = LineData(datasetLine)
binding.chartLine.data = linedata
binding.chartLine.invalidate()
}
// チャートのリセット
fun resetChart(){
Toast.makeText(applicationContext,"fun : Reset Chart", Toast.LENGTH_SHORT).show()
// 線グラフ ------------------------------------------
entryLine.clear()
datasetLine = LineDataSet(entryLine, "reset")
linedata = LineData(datasetLine)
binding.chartLine.data = linedata
binding.chartLine.invalidate()
}
}
サンプル：チャート(円グラフ)の場合
<!-- Chart：円グラフ -->
<com.github.mikephil.charting.charts.PieChart
android:id="@+id/chartPie"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"/>
Kotlinは以下の通り。
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
// ランダム値生成用
private val range = (0..10)
// 円グラフ用
private lateinit var entryPie:ArrayList<PieEntry>
private lateinit var datasetPie:PieDataSet
private lateinit var piedata: PieData
// 円グラフの配色用
var eleColors:ArrayList<Int> = ArrayList()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
val view = binding.root
setContentView(view)
// チャート表示：円グラフ-------------------------------------------
// 手順：①データを用意 ②DataSetにデータ群を入れる ③DataにDatasetを追加 ④チャートのデータにDataを入れる
//①
entryPie = ArrayList<com.github.mikephil.charting.data.PieEntry>()
//②
datasetPie = PieDataSet(entryPie,"Pie Sample")
//③
piedata = PieData(datasetPie)
//④
binding.chartPie.data = piedata
binding.chartPie.setBackgroundColor(Color.rgb(255,255,200))
}
// チャート内数値の変更
fun changeVal(){
// 円グラフ ------------------------------------------
try{
// 最後尾要素の値を更新する
entryPie[entryPie.count() - 1] = PieEntry(range.random().toFloat(),"element"+(entryPie.count()).toString())
// DataSet,Data,グラフ表示の更新
datasetPie =PieDataSet(entryPie, datasetPie.label)
datasetPie.colors = eleColors
piedata = PieData(datasetPie)
binding.chartPie.data = piedata
binding.chartPie.invalidate()
}catch(e:java.lang.Exception){
// グラフ内に要素がない
}
}
// チャート内要素数の変更
fun addElement(){
// 円グラフ ------------------------------------------
entryPie.add(PieEntry(5f,"element"+(entryPie.count()+1).toString()))
datasetPie = PieDataSet(entryPie, "Pie Sample")
// 色の作成
eleColors.add(Color.rgb(range.random()*25,range.random()*25,range.random()*25))
datasetPie.colors = eleColors
piedata = PieData(datasetPie)
binding.chartPie.data = piedata
binding.chartPie.invalidate()
}
// チャートのリセット
fun resetChart(){
// 円グラフ ------------------------------------------
entryPie.clear()
datasetPie = PieDataSet(entryPie,"reset")
piedata = PieData(datasetPie)
binding.chartPie.data = piedata
binding.chartPie.invalidate()
eleColors.clear()
}
}
さいごに
チャートがどんどん更新されるUIは見てて面白いのでうまく活用したいですね。
データをリアルタイムで表示するアプリを作成する際には採用を検討してみてください。
コメント