安卓日记：周月年视图的单击事件+mpandroidchart+Markview实现动态图表
效果图：
因为只是为了做出效果，没有加数据库什么的，数据都是静态的直接从数组取出来的。单击事件也是比较容易理解的，所以源码放出来给大家，本人作为安卓初学者，烦请大家请品评指正。
在xml中引用linechart
activity的代码：
package com.andyidea.drivers.activity;
import com.andyidea.drivers.util.LineChartManager;
import com.andyidea.tabdemo.R;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.LineData;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
public class LiShi_TiZhongActivity extends Activity {
private LineChart lineChart2;
private LineData lineData;
private Button btn_zhou;
private Button btn_yue;
private Button btn_nian;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.lishi_tizhong);
btn_zhou=(Button) findViewById(R.id.btn_tizhong_zhou);
btn_yue=(Button) findViewById(R.id.btn_tizhong_yue);
btn_nian=(Button) findViewById(R.id.btn_tizhong_nian);
OnClickListener cl=new OnClickListener() {
@Override
public void onClick(View v) {
if(v.getId()==R.id.btn_tizhong_nian){
btn_nian.setBackgroundResource(R.drawable.btn_choose_onclick_04);
btn_yue.setBackgroundResource(R.drawable.btn_choose_unclick_03);
btn_zhou.setBackgroundResource(R.drawable.btn_choose_unclick_02);
initNianChart();
}else if(v.getId()==R.id.btn_tizhong_yue){
btn_yue.setBackgroundResource(R.drawable.btn_choose_onclick_03);
btn_nian.setBackgroundResource(R.drawable.btn_choose_unclick_04);
btn_zhou.setBackgroundResource(R.drawable.btn_choose_unclick_02);
initYueChart();
}else if(v.getId()==R.id.btn_tizhong_zhou){
btn_zhou.setBackgroundResource(R.drawable.btn_choose_onclick_02);
btn_nian.setBackgroundResource(R.drawable.btn_choose_unclick_04);
btn_yue.setBackgroundResource(R.drawable.btn_choose_unclick_03);
initZhouChart();
}else{
btn_nian.setBackgroundResource(R.drawable.btn_choose_unclick_04);
btn_yue.setBackgroundResource(R.drawable.btn_choose_unclick_03);
btn_zhou.setBackgroundResource(R.drawable.btn_choose_unclick_02);
}
}
};
initZhouChart();
btn_zhou.setBackgroundResource(R.drawable.btn_choose_onclick_02);
btn_nian.setOnClickListener(cl);
btn_yue.setOnClickListener(cl);
btn_zhou.setOnClickListener(cl);
}
private void initZhouChart() {
lineChart2 = (LineChart) findViewById(R.id.line_chart);
// 设置图表的描述
lineChart2.setDescription("体温数据");
// 设置x轴的数据
int numX = 7;
// 设置y轴的数据
//体温
float[] datas1 = { 52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,50f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f};// 数据
// 设置折线的名称
// LineChartManager.setLineName("体温数据");
// 创建折线的图表
lineData = LineChartManager.initZhouLineChart(this, lineChart2, numX, datas1);
LineChartManager.initDataStyle(lineChart2, lineData, this);
lineChart2.setDragEnabled(true);
}
private void initYueChart() {
lineChart2 = (LineChart) findViewById(R.id.line_chart);
// 设置图表的描述
lineChart2.setDescription("体温数据");
// 设置x轴的数据
int numyue=30;
// 设置y轴的数据
//体温
//float[] datas2 = { 37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f, 37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f,37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f, 37.5f };// 数据
float[] datas1 = { 52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,50f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f};// 数据
// 设置折线的名称
// LineChartManager.setLineName("体温数据");
// 创建折线的图表
//lineData = LineChartManager.initZhouLineChart(this, lineChart2, numX, datas1);
lineData = LineChartManager.initYueLineChart(this, lineChart2, numyue, datas1);
LineChartManager.initDataStyle(lineChart2, lineData, this);
lineChart2.setDragEnabled(true);
}
private void initNianChart() {
lineChart2 = (LineChart) findViewById(R.id.line_chart);
// 设置图表的描述
lineChart2.setDescription("体温数据");
// 设置x轴的数据
int numX = 12;
// 设置y轴的数据
//体温
//float[] datas2 = { 37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f, 37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f,37.5f, 37.1f, 37.3f, 36.7f, 36.5f, 36.7f, 37.5f };// 数据
float[] datas1 = { 52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,50f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f,52.3f, 51f, 50f, 48f,49f,48f,46f,50f,50f};// 数据
// 设置折线的名称
// LineChartManager.setLineName("体温数据");
// 创建折线的图表
//lineData = LineChartManager.initZhouLineChart(this, lineChart2, numX, datas1);
lineData = LineChartManager.initNianLineChart(this, lineChart2, numX, datas1);
LineChartManager.initDataStyle(lineChart2, lineData, this);
lineChart2.setDragEnabled(true);
}
}工具类：linechartmanager
package com.andyidea.drivers.util;
import java.util.ArrayList;
import com.andyidea.tabdemo.R;
import com.github.mikephil.charting.animation.Easing;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import android.content.Context;
import android.graphics.Color;
public class LineChartManager {
private static String lineName = null;
/**
* 创建一条折线
*
* @param context
* 上下文
* @param mLineChart
* 对象
* @param count
* X轴的数据
* @param datas
* Y轴的数据
* @return LineData
*/
public static LineData initZhouLineChart(Context context, LineChart mLineChart, int count, float[] datas) {
ArrayList xValues = new ArrayList();
for (int i = 1; i <= count; i++) {
// x轴显示的数据，这里默认使用数字下标显示
String s;
switch (i) {
case 1:
s = "一";
break;
case 2:
s = "二";
break;
case 3:
s = "三";
break;
case 4:
s = "四";
break;
case 5:
s = "五";
break;
case 6:
s = "六";
break;
case 7:
s = "日";
break;
default:
s = "null";
break;
}
xValues.add("星期" + s);
}
// y轴的数据
ArrayList yValues = new ArrayList();
for (int i = 0; i < count; i++) {
yValues.add(new Entry(datas[i], i));
}
// 设置折线的样式
LineDataSet dataSet = new LineDataSet(yValues, lineName);
// 用y轴的集合来设置参数
dataSet.setLineWidth(2f); // 线宽
dataSet.setCircleSize(4f);// 显示的圆形大小
dataSet.setColor(Color.rgb(89, 194, 230));// 折线显示颜色
dataSet.setCircleColor(Color.rgb(89, 194, 230));// 圆形折点的颜色
dataSet.setHighLightColor(Color.GREEN); // 高亮的线的颜色
dataSet.setHighlightEnabled(true);
dataSet.setValueTextColor(Color.rgb(89, 194, 230)); // 数值显示的颜色
dataSet.setValueTextSize(10f); // 数值显示的大小
dataSet.setDrawValues(false);// 设置y轴的数字不显示
ArrayList dataSets = new ArrayList();
dataSets.add(dataSet);
// 构建一个LineData 将dataSets放入
LineData lineData = new LineData(xValues, dataSets);
return lineData;
}
public static LineData initYueLineChart(Context context, LineChart mLineChart, int count, float[] datas) {
ArrayList xValues = new ArrayList();
for (int i = 1; i <= count; i++) {
// x轴显示的数据
xValues.add(i + "日");
}
// y轴的数据
ArrayList yValues = new ArrayList();
for (int i = 0; i < count; i++) {
yValues.add(new Entry(datas[i], i));
}
// 设置折线的样式
LineDataSet dataSet = new LineDataSet(yValues, lineName);
// 用y轴的集合来设置参数
dataSet.setLineWidth(2f); // 线宽
dataSet.setCircleSize(4f);// 显示的圆形大小
dataSet.setColor(Color.rgb(89, 194, 230));// 折线显示颜色
dataSet.setCircleColor(Color.rgb(89, 194, 230));// 圆形折点的颜色
dataSet.setHighLightColor(Color.GREEN); // 高亮的线的颜色
dataSet.setHighlightEnabled(true);
dataSet.setValueTextColor(Color.rgb(89, 194, 230)); // 数值显示的颜色
dataSet.setValueTextSize(10f); // 数值显示的大小
dataSet.setDrawValues(false);// 设置y轴的数字不显示
ArrayList dataSets = new ArrayList();
dataSets.add(dataSet);
// 构建一个LineData 将dataSets放入
LineData lineData = new LineData(xValues, dataSets);
return lineData;
}
public static LineData initNianLineChart(Context context, LineChart mLineChart, int count, float[] datas) {
ArrayList xValues = new ArrayList();
for (int i = 1; i <= count; i++) {
// x轴显示的数据
xValues.add(i + "月");
}
// y轴的数据
ArrayList yValues = new ArrayList();
for (int i = 0; i < count; i++) {
yValues.add(new Entry(datas[i], i));
}
// 设置折线的样式
LineDataSet dataSet = new LineDataSet(yValues, lineName);
// 用y轴的集合来设置参数
dataSet.setLineWidth(2f); // 线宽
dataSet.setCircleSize(4f);// 显示的圆形大小
dataSet.setColor(Color.rgb(89, 194, 230));// 折线显示颜色
dataSet.setCircleColor(Color.rgb(89, 194, 230));// 圆形折点的颜色
dataSet.setHighLightColor(Color.GREEN); // 高亮的线的颜色
dataSet.setHighlightEnabled(true);
dataSet.setValueTextColor(Color.rgb(89, 194, 230)); // 数值显示的颜色
dataSet.setValueTextSize(10f); // 数值显示的大小
dataSet.setDrawValues(false);// 设置y轴的数字不显示
ArrayList dataSets = new ArrayList();
dataSets.add(dataSet);
// 构建一个LineData 将dataSets放入
LineData lineData = new LineData(xValues, dataSets);
return lineData;
}
/**
* @Description:初始化图表的样式
*/
public static void initDataStyle(LineChart lineChart, LineData lineData, Context context) {
// 设置点击折线点时，显示其数值
MarkerView mv = new MyMarkerView(context,R.layout.content_marker_view);
lineChart.setMarkerView(mv);
lineChart.setDrawBorders(false); // 在折线图上添加边框
// lineChart.setDescription("时间/数据"); //数据描述
lineChart.setNoDataText("暂无数据");// 没有数据的时候
lineChart.setDrawGridBackground(false); // 表格颜色
lineChart.setGridBackgroundColor(Color.GRAY & 0x70FFFFFF); // 表格的颜色，设置一个透明度
lineChart.setTouchEnabled(true); // 启用/禁用与图表的所有可能的触摸交互。
lineChart.setDragEnabled(true); // 可拖拽
lineChart.setScaleEnabled(false); // 可缩放
lineChart.setPinchZoom(true);// 如果设置为true，捏缩放功能。 如果false，x轴和y轴可分别放大。
lineChart.setBackgroundColor(Color.WHITE); // 设置背景颜色
lineChart.setVisibleXRangeMaximum(12);// x轴底部最多显示几个
lineChart.setVisibleXRangeMinimum(7);
// setViewPortOffsets(float left, float top, float right, float bottom)
// : 设置当前视图的偏移量（实际图表窗口的两侧偏移量）。 设置这个，将阻止图表自动计算它的偏移量。
// 使用 resetViewPortOffsets() 撤消此设置。
lineChart.setViewPortOffsets(80f, 50f, 80f, 50f);
Legend legend = lineChart.getLegend();
legend.setEnabled(false);// 设置Legend启用或禁用。 如果禁用， Legend 将不会被绘制。
lineChart.setData(lineData);
Legend mLegend = lineChart.getLegend(); // 设置标示，就是那个一组y的value的
mLegend.setForm(Legend.LegendForm.SQUARE); // 样式
mLegend.setFormSize(6f); // 字体
mLegend.setTextColor(Color.GRAY); // 颜色
lineChart.setVisibleXRange(1, 15); // x轴可显示的坐标范围
XAxis xAxis = lineChart.getXAxis(); // x轴的标示
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // x轴位置
xAxis.setTextColor(Color.GRAY); // 字体的颜色
xAxis.setTextSize(10f); // 字体大小
xAxis.setGridColor(Color.GRAY);// 网格线颜色
xAxis.setDrawGridLines(false); // 不显示网格线
xAxis.setAxisLineWidth(1f);// 设置x轴的直线宽度
YAxis axisLeft = lineChart.getAxisLeft(); // y轴左边标示
YAxis axisRight = lineChart.getAxisRight(); // y轴右边标示
axisLeft.setTextColor(Color.GRAY); // 字体颜色
axisLeft.setTextSize(10f); // 字体大小
// axisLeft.setAxisMaxValue(800f); //最大值
axisLeft.setLabelCount(5, true); // 显示格数
axisLeft.setGridColor(Color.GRAY); // 网格线颜色
// 设置y轴初始数据不是零
axisLeft.setStartAtZero(false);
axisLeft.setAxisMinValue(40f);
axisLeft.setAxisMaxValue(60f);
axisRight.setDrawAxisLine(false);
axisRight.setDrawGridLines(false);
axisRight.setDrawLabels(false);
// 设置动画效果
/*
* lineChart.animateY(1500); lineChart.animateX(1500);
*/
// lineChart.invalidate();
lineChart.animateXY(1000, 1000);
// lineChart.animateX(2000); //立即执行动画
}
/**
* @param name
* @Description:设置折线的名称
*/
public static void setLineName(String name) {
lineName = name;
}
} 最后是markview的效果，需要一个背景文件bg_mark，一个markview的xml布局文件，以及markview类
android:shape="rectangle">
package com.andyidea.drivers.util;
import com.andyidea.tabdemo.R;
import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import android.content.Context;
import android.widget.TextView;
public class MyMarkerView extends MarkerView {
private TextView mContentTv;
public MyMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
mContentTv = (TextView) findViewById(R.id.tv_content_marker_view);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
mContentTv.setText("" + e.getVal());
}
@Override
public int getXOffset(float xpos) {
return -(getWidth() / 2);
}
@Override
public int getYOffset(float ypos) {
return -getHeight();
}
}在引用markview的时候，直接在activity文件中写入：
// 设置点击折线点时，显示其数值
MarkerView mv = new MyMarkerView(context,R.layout.content_marker_view);
lineChart.setMarkerView(mv);