美文网首页
MpAndroidChart

MpAndroidChart

作者: 琳媚儿 | 来源:发表于2019-12-04 16:25 被阅读0次

官网:https://weeklycoding.com/mpandroidchart-documentation/

  • MPAndroidChart是一个简单易用的图表开源库,它能实现Android与IOS跨平台开发。

Gradle配置:

repositories {
   maven { url "https://jitpack.io" }
}
dependencies {
          implementation group: 'com.github.PhilJay', name: 'MPAndroidChart', version: 'v3.0.3'
}
  • x轴轴线
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); 设置x轴线位于底部
    xAxis.setTextColor(Color.BLACK); 设置文本颜色
    xAxis.setDrawGridLines(false); 不显示网格线
    xAxis.setTextSize(10); 字体大小
    xAxis.setAxisLineWidth(2); 线宽
    xAxis.setGranularity(1); //数据的间隔
    xAxis.setLabelCount(5,true);//坐标轴的数据有几个
    xAxis.setEnabled(true); 是否显示线

LineChart 实现多条线性图

  • 引入xml布局
 <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="400dp">
    </com.github.mikephil.charting.charts.LineChart>

第一步添加数据

public LineData initData(){
        List<Entry> entries=new ArrayList<>();
        List<Entry> entries1=new ArrayList<>();
        entries.add(new Entry(3f,20));
     
        entries1.add(new Entry(5f,30));
  
        LineDataSet dataSet=new LineDataSet(entries,"数据一");
        LineDataSet dataSet1=new LineDataSet(entries1,"数据二");
        List<ILineDataSet> list=new ArrayList<>();
        list.add(dataSet);
        list.add(dataSet1);
        LineData lineData=new LineData(list);
        return lineData;
    }

第二步设置轴(x轴,y轴)

 protected String[] mMonths=new String[]{
      "1月","2月","3月","4月","5月"
    };

 xAxis.setValueFormatter(new ValueFormatter() {
           @Override
           public String getAxisLabel(float value, AxisBase axis) {
               return mMonths[(int) value% mMonths.length];
           }
       });
public void setLinChar(LineChart lineChart){
        XAxis xAxis= lineChart.getXAxis();
        YAxis yAxisLeft= lineChart.getAxisLeft();
        YAxis yAxisRight=lineChart.getAxisRight();
        line(xAxis,yAxisLeft,yAxisRight);
    }

第三步 设置样式

 public void line(XAxis xAxis,YAxis yAxisLeft,YAxis yAxisRight){
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(true);
        xAxis.setEnabled(true);
        yAxisLeft.setDrawGridLines(false);
        yAxisLeft.setEnabled(true);
        yAxisRight.setEnabled(false);
    }

最后一步:

LineData lineData=initData(); 创建并导入到layout 中

        lineChart=findViewById(R.id.line); //初始化
        LineData lineData=initData(); //初始化模拟数据
        lineChart.setData(lineData); //将模拟数据用于线形图,在线形图显示
        setLinChar(lineChart);
        lineChart.invalidate(); //填充数据后刷新

PieChart 饼图

设置颜色

 List<Integer> colors=new ArrayList<>();
        colors.add(getResources().getColor(R.color.colorPrimary));
        colors.add(getResources().getColor(R.color.yellow));
        colors.add(getResources().getColor(R.color.colorAccent));
        colors.add(getResources().getColor(R.color.bule));
        PieDataSet set=new PieDataSet(entries,"Election Results");
        set.setColors(colors);

设置黄线,外部连接线

        set.setValueLinePart1OffsetPercentage(80f);
        set.setValueLinePart1Length(0.3f);
        set.setValueLinePart2Length(0.4f);
        set.setValueLineColor(Color.YELLOW);
        set.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);

将空心变实心:

       pieChart.setHoleRadius(0f);               //将空心变成实心
        pieChart.setTransparentCircleRadius(0f);  //设置半透明圆

设置两个饼块之间的距离

        set.setSliceSpace(10);
        set.setHighlightEnabled(true);

设置描述:

        Description description=new Description();
        description.setText(" ");
        pieChart.setDescription(description);

不显示图例:

        Legend legend=pieChart.getLegend();
        legend.setEnabled(false);

MakerView 弹出视窗

public class Mark extends MarkerView {
    private TextView textView;
    public Mark(Context context) {
        super(context, R.layout.item_line);
        textView=findViewById(R.id.tv);
    }
//每次重绘MarkerView时都会回调,可用于更新
    //内容(用户界面)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        super.refreshContent(e, highlight);
        textView.setText(""+e.getY());
    }
    MPPointF mpPointF;
//将标记水平和垂直居中
    @Override
    public MPPointF getOffset() {
        if (mpPointF==null){
            mpPointF=new MPPointF(-(getWidth()/2),getHeight());
        }
        return super.getOffset();
    }
}
  • 实例化:获取标记
 Mark m=new Mark(this);
 lineChart.setMarker(m);

RadarChart 雷达图

  • 布局
com.github.mikephil.charting.charts.RadarChart
        android:id="@+id/Radar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.github.mikephil.charting.charts.RadarChart>
  • 背景填充
        set.setFillColor(ColorTemplate.JOYFUL_COLORS[0]); //背景填充
        set.setDrawFilled(true);
  • y 轴设置 数据
        YAxis yAxis = radarChart.getYAxis();
        yAxis.setLabelCount(5, false);

相关文章

网友评论

      本文标题:MpAndroidChart

      本文链接:https://www.haomeiwen.com/subject/smdlgctx.html