美文网首页
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