Android统计图表MPAndroidChart：为多条统计折线动态更新数据，以高温低温曲线为例【7】

Android统计图表MPAndroidChart：为多条统计折线动态更新数据，以高温低温曲线为例【7】

本文在附录文章6的基础上，为Android统计图表MPAndroidChart的同一个LineChart中同时增加两条统计折线，动态的为这两条折线同时增加数据并更新结果。典型的，以天气预报中的高温和低温线为例加以说明。
写布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="zhangphil.chart.MainActivity" >    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="动态添加数据" />    <com.github.mikephil.charting.charts.LineChart        android:id="@+id/chart"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

Java代码：

package zhangphil.chart;import java.text.DecimalFormat;import com.github.mikephil.charting.charts.LineChart;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.components.XAxis;import com.github.mikephil.charting.components.XAxis.XAxisPosition;import com.github.mikephil.charting.components.YAxis.AxisDependency;import com.github.mikephil.charting.components.YAxis;import com.github.mikephil.charting.components.Legend.LegendForm;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.LineData;import com.github.mikephil.charting.data.LineDataSet;import com.github.mikephil.charting.formatter.ValueFormatter;import com.github.mikephil.charting.utils.ColorTemplate;import com.github.mikephil.charting.utils.ViewPortHandler;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.view.View;import android.widget.Button;public class MainActivity extends Activity {// 高温线下标private final int HIGH = 0;// 低温线下标private final int LOW = 1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);final LineChart mChart = (LineChart) findViewById(R.id.chart);initialChart(mChart);addLineDataSet(mChart);// 每点击一次按钮，增加一个点Button addButton = (Button) findViewById(R.id.button);addButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {addEntry(mChart);}});}// 初始化图表private void initialChart(LineChart mChart) {mChart.setDescription("Zhang Phil @ http://blog.csdn.net/zhangphil");mChart.setNoDataTextDescription("暂时尚无数据");mChart.setTouchEnabled(true);// 可拖曳mChart.setDragEnabled(true);// 可缩放mChart.setScaleEnabled(true);mChart.setDrawGridBackground(false);mChart.setPinchZoom(true);// 设置图表的背景颜色mChart.setBackgroundColor(0xfff5f5f5);// 图表的注解(只有当数据集存在时候才生效)Legend l = mChart.getLegend();// 可以修改图表注解部分的位置// l.setPosition(LegendPosition.LEFT_OF_CHART);// 线性，也可是圆l.setForm(LegendForm.LINE);// 颜色l.setTextColor(Color.CYAN);// x坐标轴XAxis xl = mChart.getXAxis();xl.setTextColor(0xff00897b);xl.setDrawGridLines(false);xl.setAvoidFirstLastClipping(true);// 几个x坐标轴之间才绘制？xl.setSpaceBetweenLabels(5);// 如果false，那么x坐标轴将不可见xl.setEnabled(true);// 将X坐标轴放置在底部，默认是在顶部。xl.setPosition(XAxisPosition.BOTTOM);// 图表左边的y坐标轴线YAxis leftAxis = mChart.getAxisLeft();leftAxis.setTextColor(0xff37474f);// 最大值leftAxis.setAxisMaxValue(50f);// 最小值leftAxis.setAxisMinValue(-10f);// 不一定要从0开始leftAxis.setStartAtZero(false);leftAxis.setDrawGridLines(true);YAxis rightAxis = mChart.getAxisRight();// 不显示图表的右边y坐标轴线rightAxis.setEnabled(false);}// 为LineChart增加LineDataSetprivate void addLineDataSet(LineChart mChart) {LineData data = new LineData();data.addDataSet(createHighLineDataSet());data.addDataSet(createLowLineDataSet());// 数据显示的颜色// data.setValueTextColor(Color.WHITE);// 先增加一个空的数据，随后往里面动态添加mChart.setData(data);}// 同时为高温线和低温线添加进去一个坐标点private void addEntry(LineChart mChart) {LineData data = mChart.getData();data.addXValue((data.getXValCount()) + "");// 增加高温LineDataSet highLineDataSet = data.getDataSetByIndex(HIGH);float fh = (float) ((Math.random()) * 10 + 30);Entry entryh = new Entry(fh, highLineDataSet.getEntryCount());data.addEntry(entryh, HIGH);// 增加低温LineDataSet lowLineDataSet = data.getDataSetByIndex(LOW);float fl = (float) ((Math.random()) * 10);Entry entryl = new Entry(fl, lowLineDataSet.getEntryCount());data.addEntry(entryl, LOW);mChart.notifyDataSetChanged();// 当前统计图表中最多在x轴坐标线上显示的总量mChart.setVisibleXRangeMaximum(4);mChart.moveViewToX(data.getXValCount() - 4);}// 初始化数据集，添加一条高温统计折线private LineDataSet createHighLineDataSet() {LineDataSet set = new LineDataSet(null, "高温");set.setAxisDependency(AxisDependency.LEFT);// 折线的颜色set.setColor(Color.RED);set.setCircleColor(Color.YELLOW);set.setLineWidth(5f);set.setCircleSize(10f);// set.setFillAlpha(128);set.setCircleColorHole(Color.BLUE);set.setHighLightColor(Color.GREEN);set.setValueTextColor(Color.RED);set.setValueTextSize(10f);set.setDrawValues(true);set.setValueFormatter(new ValueFormatter() {@Overridepublic String getFormattedValue(float value, Entry entry, int dataSetIndex,ViewPortHandler viewPortHandler) {DecimalFormat decimalFormat = new DecimalFormat(".0℃");String s = "高温" + decimalFormat.format(value);return s;}});return set;}// 初始化数据集，添加一条低温统计折线private LineDataSet createLowLineDataSet() {LineDataSet set = new LineDataSet(null, "低温");set.setAxisDependency(AxisDependency.LEFT);// 折线的颜色set.setColor(ColorTemplate.getHoloBlue());set.setCircleColor(Color.BLUE);set.setLineWidth(1f);set.setCircleSize(10f);// set.setFillAlpha(128);// set.setFillColor(ColorTemplate.getHoloBlue());set.setHighLightColor(Color.DKGRAY);set.setValueTextColor(Color.BLACK);set.setCircleColorHole(Color.RED);set.setValueTextSize(15f);set.setDrawValues(true);set.setValueFormatter(new ValueFormatter() {@Overridepublic String getFormattedValue(float value, Entry entry, int dataSetIndex,ViewPortHandler viewPortHandler) {DecimalFormat decimalFormat = new DecimalFormat(".0℃");String s = "低温" + decimalFormat.format(value);return s;}});return set;}}

运行结果动图展示动态效果：

一张静态截图展示更清晰的效果：

相关文章：
【1】《Android统计图表MPAndroidChart》链接地址：http://blog.csdn.net/zhangphil/article/details/47656521
【2】《基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能》链接地址：http://blog.csdn.net/zhangphil/article/details/47685515
【3】《Android实现天气预报温度/气温折线趋势图》链接地址：http://blog.csdn.net/zhangphil/article/details/47702245
【4】《Android统计图表之柱状图（条形图）》链接地址：http://blog.csdn.net/zhangphil/article/details/47727913
【5】《Android MPAndroidChart之PieChart和数据结构以及模型【5】》链接地址：http://blog.csdn.net/zhangphil/article/details/50172817
【6】《Android统计图表MPAndroidChart：动态添加数据更新【6】》链接地址：http://blog.csdn.net/zhangphil/article/details/50185115

【7】MPAndroidChart在github上的项目主页：https://github.com/PhilJay/MPAndroidChart

更多相关文章

随机推荐