冒充前言的前言
个人觉得，这个第三方功能还是十分强大的，至少我的这几个项目所需的功能都可以满足。嗯，还是说说这个东西怎么用吧，以及各个属性的意思吧。
step1：下载mpchartlib.jar，放进项目，add as library即可。
jar包下载地址：
step2:放入布局文件中,如下所示：
<!--折线图-->
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"/>
step3:在Activity中找到控件，然后设置相应的属性以及填充数据（copy整个类啦，这样实现也方便一些）
public class MyLineChartActivity extends AppCompatActivity implements OnChartValueSelectedListener {
public static int ChartClickPosition=0;//用一个静态变量记录折线图被点击数值对应的横坐标
private LineChart mLineChart;
private List<String> datas,datas2;//两条折线图的数据源
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_line_chart);
initView();
initData();
setDateForLineChart();
}
//初始化控件
public void initView() {
datas = new ArrayList<>();
datas2 = new ArrayList<>();
mLineChart = (LineChart) findViewById(R.id.lineChart);
}
//模拟数据源
private void initData() {
Random random = new Random();
for (int i = 0; i < 8; i++) {
if (i%6==0&&i!=0){
datas.add("超时");//模拟无数据
}else{
datas.add( random.nextInt(66)+"");//生成0-66的随机整数
}
}
for (int i = 0; i < 8; i++) {
if (i%6==0&&i!=0){
datas2.add("超时");//模拟无数据
}else{
datas2.add( random.nextInt(66)+"");//生成0-66的随机整数
}
}
}
//为折线图设置数据
private void setDateForLineChart() {
initSrc();
ArrayList<String> xValues = initXAxis();
initYAxis();
LineDataSet dataSet1 = initYValueAxis("one");//可创建多条线
LineDataSet dataSet2 = initYValueAxis("two");
//构建一个类型为LineDataSet的ArrayList 用来存放所有 y的LineDataSet 它是构建最终加入LineChart数据集所需要的参数
ArrayList<LineDataSet> dataSets = new ArrayList<>();
dataSets.add(dataSet1); //将数据加入dataSets
dataSets.add(dataSet2); //将数据加入dataSets
LineData lineData = new LineData(xValues, dataSets); //构建一个LineData 将dataSets放入
mLineChart.setData(lineData); //将数据绑定到图表
mLineChart.invalidate();//刷新图表
}
private void initSrc() {
mLineChart.setOnChartValueSelectedListener(this);//设置监听
//折线图与用户交互
mLineChart.setTouchEnabled(true); // 设置是否可以触摸
mLineChart.setDragEnabled(false);// 是否可以拖拽
mLineChart.setScaleEnabled(false);// 是否可以缩放
mLineChart.setDrawBorders(false); //是否在折线图上添加边框
mLineChart.setPinchZoom(false);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放
mLineChart.setDoubleTapToZoomEnabled(false);//设置双击不放大
mLineChart.setNoDataTextDescription("暂无数据");
mLineChart.setDescriptionColor(0xffffffff);//设置数据描述的字体颜色
mLineChart.setDescriptionPosition(100, 15);//数据描述的位置
mLineChart.setGridBackgroundColor(0x00000000);//透明色
mLineChart.animateXY(1000, 1000); //从XY轴一起进入的动画
mLineChart.setDescription("");
mLineChart.setBackgroundColor(0xff0092F3);//设置整个折线图的背景颜色
MyMarkerView mv = new MyMarkerView(MyLineChartActivity.this, R.layout.custom_marker_view);
mLineChart.setMarkerView(mv);
Legend mLegend = mLineChart.getLegend(); // 设置比例图标示
mLegend.setForm(Legend.LegendForm.CIRCLE); //设置图最下面显示的类型 CIRCLE小圆圈 SQUARE正方形 LINE直线
mLegend.setEnabled(true); //设置图最下面的比例图标是否显示
mLegend.setTextColor(0xffffffff);
}
private ArrayList<String> initXAxis() {
//X轴样式设置
XAxis xAxis = mLineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);// 设置x轴在底部显示
xAxis.setSpaceBetweenLabels(50); // x轴间距，对折线图来说好像没啥用
xAxis.setAxisLineColor(0x00000000);//设置横坐标线的颜色
xAxis.setDrawGridLines(false);//设置是否显示横轴表格
xAxis.setTextColor(0xffffffff);//设置横坐标文字的颜色
xAxis.setLabelsToSkip(0);//横坐标间隔数
//x轴数据
ArrayList<String> xValues = new ArrayList<>();
for (int i = 1; i <= datas.size(); i++) {//我这里设置横坐标从一显示了
xValues.add(i + "");
}
return xValues;
}
private void initYAxis() {
// 左面y轴样式设置
YAxis yleftAxis = mLineChart.getAxisLeft();
yleftAxis.setDrawGridLines(false); //设置显示Y轴表格线
yleftAxis.setStartAtZero(false);//设置数据不从零显示
yleftAxis.setAxisLineColor(0x00000000);//透明色
yleftAxis.setTextColor(0xffffff);
yleftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
// 右面y轴样式设置
YAxis yrightAxis = mLineChart.getAxisRight();
yrightAxis.setDrawGridLines(false);//设置隐藏Y轴表格线
yrightAxis.setDrawLabels(false);//设置右侧Y轴是否显示 Label
yrightAxis.setDrawAxisLine(false);
}
private LineDataSet initYValueAxis(String type) {
ArrayList<Entry> yValue1 = new ArrayList<>();
if (type.equals("one")){
for (int i = 0; i <datas.size(); i++) {
try {
if (i < datas.size()) {
String yDataStr = datas.get(i);
if (yDataStr != null && !yDataStr.equals("超时")) {//如果数据有效（有数据），显示
yValue1.add(new Entry(Float.parseFloat(yDataStr), i));
}
}
} catch (Exception e) {
// e.printStackTrace();
return null;
}
}
}else if(type.equals("two")){
for (int i = 0; i <datas2.size(); i++) {
try {
if (i < datas2.size()) {
String yDataStr = datas2.get(i);
if (yDataStr != null && !yDataStr.equals("超时")) {//如果数据有效（有数据），显示
yValue1.add(new Entry(Float.parseFloat(yDataStr), i));
}
}
} catch (Exception e) {
// e.printStackTrace();
return null;
}
}
}
/**
* 曲线样式设置
*/
LineDataSet dataSet1;//构建一个LineDataSet 代表一组Y轴数据
String title= (type.equals("one")?"oneChart":"twoChart");
dataSet1 = new LineDataSet(yValue1,title);
dataSet1.setDrawValues(false);
if (type.equals("one")){
dataSet1.setColor(0xffffffff);//折线图线的颜色
dataSet1.setCircleColor(0xffffffff);//圆圈颜色
dataSet1.setCircleColorHole(0xff148CEF);//圆实心颜色
}else if (type.equals("two")){
dataSet1.setColor(0xab404040);//折线图线的颜色
dataSet1.setCircleColor(0xab404040);//圆圈颜色
dataSet1.setCircleColorHole(0x148CEF);//圆实心颜色
}
dataSet1.setCircleSize(2.5f);//设置圆的尺寸
dataSet1.setHighLightColor(0x90ffffff);//设置点击数值时，出现横纵坐标线的颜色
dataSet1.setLineWidth(1f);
dataSet1.setDrawCubic(true); //设置曲线为圆滑的线
return dataSet1;
}
@Override
public void onValueSelected(Entry entry, int i, Highlight highlight) {
ChartClickPosition=entry.getXIndex();//获取当前点击的横坐标，并保存
}
@Override
public void onNothingSelected() {
}
}
step4:layout.custom_marker_view.xml，样式咋好看咋改
<TextView
android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_centerHorizontal="true"
android:textSize="9sp"
android:textColor="#ffffff" />
step5: MyMarkerView .class
public class MyMarkerView extends MarkerView {
private TextView tvContent;
public MyMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
}
// callbacks everytime the MarkerView is redrawn, can be used to update the
// content
@Override
public void refreshContent(Entry e, int dataSetIndex) {
if (e instanceof CandleEntry) {
CandleEntry ce = (CandleEntry) e;
tvContent.setText("" + ce.getHigh());//值为浮点数
//tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));//值为四舍五入后的整数
} else {
tvContent.setText("" + e.getVal());//值为浮点数
//tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));//值为四舍五入后的整数
}
}
@Override
public int getXOffset() {//设置偏移量
if (MyLineChartActivity.ChartClickPosition <= 3) {//避免数值与纵坐标重叠
return 0;
} else {
return -getMeasuredWidth();
}
}
@Override
public int getYOffset() {//设置偏移量
return -getMeasuredHeight();
}
}
step6:上传一张效果图
冒充后记的后记
1、横纵坐标的数据我动态填充的，因为毕竟项目中数据都比较灵活嘛。
2、在没有值的情况下，可以自己添加一个标识，添加y轴数据的时候自己判断就好了。
3、如果添加多条线的时候，需要多条线的横坐标数量保持一致才行，要不然程序就挂了。
4、以上内容纯属个人理解，如有不妥之处，请指出。如有雷同，那就算咱俩心有灵犀吧，哈哈。
5、还有啊，解释权归本人所有。
源码下载：
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
