MPAndroid Chartでダイナミックな折れ線図を実現
16171 ワード
最近作ったプロジェクトはダイナミックな折れ線図が必要で、良いライブラリMPAndroid Chartを知っているので、それを使って完成したいと思っています.次は私が公式Demoで作ったDemoです.
まず、折れ線グラフを初期化します.
次にデータを追加
まず、折れ線グラフを初期化します.
private void initChart() {
// enable description text
mChart.getDescription().setEnabled(false);
// enable touch gestures
mChart.setTouchEnabled(true);
// enable scaling and dragging
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
mChart.setDrawGridBackground(false);
// if disabled, scaling can be done on x- and y-axis separately
mChart.setPinchZoom(true);
// set an alternative background color
mChart.setBackgroundColor(Color.WHITE);
LineData data = new LineData();
data.setValueTextColor(Color.WHITE);
// add empty data
mChart.setData(data);
// get the legend (only possible after setting data)
Legend l = mChart.getLegend();
// modify the legend ...
l.setForm(Legend.LegendForm.LINE);
l.setTypeface(mTfLight);
l.setTextColor(Color.WHITE);
l.setEnabled(false);
XAxis xl = mChart.getXAxis();
xl.setPosition(XAxis.XAxisPosition.BOTTOM);
xl.setDrawLabels(false);
xl.setGranularity(1f);
xl.setTypeface(mTfLight);
xl.setTextColor(Color.WHITE);
xl.setDrawGridLines(true);
xl.enableGridDashedLine(10f, 10f, 0f);
xl.setAvoidFirstLastClipping(true);
xl.setEnabled(true);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTypeface(mTfLight);
leftAxis.setGranularity(1f);
leftAxis.setTextColor(Color.parseColor("#A2A2A2"));
leftAxis.setAxisMaximum(100f);
leftAxis.setAxisMinimum(0f);
// y
leftAxis.resetAxisMinimum();
leftAxis.resetAxisMaximum();
leftAxis.setDrawGridLines(true);
leftAxis.enableGridDashedLine(10f, 10f, 0f);
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setEnabled(false);
}
次にデータを追加
private void feedMultiple() {
if (thread != null) {
thread.interrupt();
} else {
final Runnable runnable = new Runnable() {
@Override
public void run() {
addEntry();
}
};
thread = new Thread(new Runnable() {
@Override
public void run() {
for (int i = 0; i < 400; i++) {
// Don't generate garbage runnables inside the loop.
runOnUiThread(runnable);
try {
Thread.sleep(25);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
});
thread.start();
}
}
private int i = 0;
private void addEntry() {
LineData data = mChart.getData();
if (data != null) {
ILineDataSet set = data.getDataSetByIndex(0);
// set.addEntry(...); // can be called as well
if (set == null) {
set = createSet();
data.addDataSet(set);
}
// 120 ,
if (i > 120) {
set.removeFirst();
data.addEntry(new Entry(set.getEntryCount() + (float) (i - 120), y), 0);
} else {
data.addEntry(new Entry(set.getEntryCount(), y), 0);
}
i++;
if (index % 5 == 0) {
data.addEntry(new Entry(set.getEntryCount(), 50), 0);
} else if (index % 5 == 1) {
data.addEntry(new Entry(set.getEntryCount(), 50), 0);
} else if (index % 5 == 2) {
data.addEntry(new Entry(set.getEntryCount(), 80), 0);
} else if (index % 5 == 3) {
data.addEntry(new Entry(set.getEntryCount(), 20), 0);
} else if (index % 5 == 4) {
data.addEntry(new Entry(set.getEntryCount(), 50), 0);
}
index++;
data.notifyDataChanged();
// let the chart know it's data has changed
mChart.notifyDataSetChanged();
//
mChart.setVisibleXRangeMaximum(120);
// mChart.setVisibleYRange(30, AxisDependency.LEFT);
// move to the latest entry
mChart.moveViewToX(data.getEntryCount());
// this automatically refreshes the chart (calls invalidate())
// mChart.moveViewTo(data.getXValCount()-7, 55f,
// AxisDependency.LEFT);
}
}
private LineDataSet createSet() {
LineDataSet set = new LineDataSet(null, "Dynamic Data");
set.setAxisDependency(YAxis.AxisDependency.LEFT);
set.setColor(Color.parseColor("#FDC328"));
set.setCircleColor(Color.WHITE);
set.setLineWidth(2f);
set.setCircleRadius(3f);
set.setDrawCircles(false);
set.setFillAlpha(65);
set.setFillColor(ColorTemplate.getHoloBlue());
set.setHighLightColor(Color.rgb(244, 117, 117));
set.setValueTextColor(Color.WHITE);
set.setValueTextSize(9f);
set.setDrawValues(false);
return set;
}