效果图:
因为只是为了做出效果,没有加数据库什么的,数据都是静态的直接从数组取出来的。单击事件也是比较容易理解的,所以源码放出来给大家,本人作为安卓初学者,烦请大家请品评指正。
在xml中引用linechart
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/line_chart"
android:layout_width="match_parent"
android:layout_height="160dp" >
</com.github.mikephil.charting.charts.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<String> xValues = new ArrayList<String>();
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<Entry> yValues = new ArrayList<Entry>();
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<LineDataSet> dataSets = new ArrayList<LineDataSet>();
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<String> xValues = new ArrayList<String>();
for (int i = 1; i <= count; i++) {
// x轴显示的数据
xValues.add(i + "日");
}
// y轴的数据
ArrayList<Entry> yValues = new ArrayList<Entry>();
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<LineDataSet> dataSets = new ArrayList<LineDataSet>();
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<String> xValues = new ArrayList<String>();
for (int i = 1; i <= count; i++) {
// x轴显示的数据
xValues.add(i + "月");
}
// y轴的数据
ArrayList<Entry> yValues = new ArrayList<Entry>();
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<LineDataSet> dataSets = new ArrayList<LineDataSet>();
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类
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
android:shape="rectangle">
<solid android:color="@color/text_color_fc" />
<corners android:radius="30dp" />
<solid android:color="@color/text_color_fc"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="35dp"
android:layout_height="25dp"
android:background="@drawable/bg_marker"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_content_marker_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/white"
android:textSize="12sp"/>
</RelativeLayout>
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);
写在结尾:也从网上找了十来篇案例,都下载下来在手机调试一遍,又不断地修改,钻研,才勉强做出了自己想要的效果。自觉代码好像还可以从各个方面进行优化,但没有好的思路。希望大家批评指正哈~