MPAndroidChart的实现多条折线图，折线图自己封装的，可以直接拿到自己程序里面用

最新推荐文章于 2024-08-08 14:26:03 发布

棒怡情

最新推荐文章于 2024-08-08 14:26:03 发布

阅读量1.8k

点赞数 1

分类专栏： android开发

本文链接：https://blog.csdn.net/bangyiqing/article/details/107076831

版权

android开发专栏收录该内容

138 篇文章 2 订阅

订阅专栏

首先上效果图，两条折线图数据。

下面上代码。

1.先上自己封装的MyLineChart代码。同样对属性进行了封装。设置数据调用setLineChartData()方法

public class MyLineChart extends LineChart {
    public ValueFormatter mXAxisFormatter;
    protected Typeface tfLight;
    private Context context;
    public MyLineChart(Context context) {
        super(context);
        tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
        this.context=context;
        initLineChart();
    }

    public MyLineChart(Context context, AttributeSet attrs) {
        super(context, attrs);
        tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
        this.context=context;
        initLineChart();
    }

    public MyLineChart(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
        this.context=context;
        initLineChart();
    }

    /**
     * 设置lineChart的一些属性配置
     */
    public void initLineChart() {
//        Typeface tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
        this.setDrawGridBackground(false);
        this.getDescription().setEnabled(false);
        this.setDrawBorders(false);

        this.getAxisRight().setEnabled(false);//不要右边的y轴
        XAxis xAxis = this.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setTypeface(tfLight);
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1f); // only intervals of 1 day
//        mXAxisFormatter = new StringDataAxisValueFormatter();//TODO 这个控制横坐标的显示内容
//        xAxis.setValueFormatter(mXAxisFormatter);
        xAxis.setLabelRotationAngle(-60);//设置x坐标的文字倾斜。为倾斜60°
        xAxis.setTextSize(9);//设置x轴文字大小
//        xAxis.setAxisMinimum(0f);//这句话不能加。加了就会出现x轴下标为-1，第一个值不在原点了。
        // enable touch gestures
        YAxis leftAxis = this.getAxisLeft();
        leftAxis.setTypeface(tfLight);
        leftAxis.setDrawGridLines(true);
        leftAxis.setLabelCount(8, true);//这里设置y轴坐标数的个数。包含0点，有几个刻度
//        leftAxis.setValueFormatter(custom);
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        leftAxis.setSpaceTop(15f);
        leftAxis.setAxisMinimum(0f); //保证y轴从0开始 不然会上移一点 this replaces setStartAtZero(true)
        this.setTouchEnabled(true);
        // enable scaling and dragging
        this.setDragEnabled(true);
//设置是否可以缩放。false不能放大缩小。但是如果显示不全可以左右滑动
        this.setScaleEnabled(false);

        // if disabled, scaling can be done on x- and y-axis separately
        this.setPinchZoom(false);
//        this.setExtraBottomOffset(10f);
        /** 图例的属性 */
        Legend l = this.getLegend();
        l.setEnabled(false);//不显示图例 底部的什么颜色代表什么的说明
        //决定底部图例的位置。
//        l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
//        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
//        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
//        l.setDrawInside(false);
//        l.setForm(Legend.LegendForm.LINE);//下面的图例是正方形还是线型样式，等其其它
//        l.setFormSize(30f);//代表图下面图例大小
//        l.setTextSize(11f);
//        l.setXEntrySpace(10f);
    }
    public void setLineChartData(List<List<Entry>> values, String[] mSsLable) {
        if (getData() != null &&
                getData().getDataSetCount() > 0) {
            for (int i = 0; i < mSsLable.length; i++) {
                LineDataSet set1 = (LineDataSet) getData().getDataSetByIndex(i);
                set1.setValues(values.get(i));
                set1.notifyDataSetChanged();
            }
            getData().notifyDataChanged();
            notifyDataSetChanged();

        } else {
            ArrayList<ILineDataSet> dataSets = new ArrayList<>();
            int[] colors = {ContextCompat.getColor(context, R.color.yiban_color)
                    , ContextCompat.getColor(context, R.color.xiaoguimo_color)
            };
            for (int z = 0; z < mSsLable.length; z++) {

                LineDataSet d = new LineDataSet(values.get(z), mSsLable[z]);//每一条折线的属性设置
                d.setLineWidth(2.5f);
//           d.setCircleRadius(4f);
                d.setDrawValues(false); // 设置是否显示数据点的值
                int color = colors[z % colors.length];
                d.setColor(color);//设置折现的颜色
                d.setCircleColor(color);//设置折线图圆圈点的颜色
                //添加下面这行代码 LineChart实现曲线样式
//                d.setMode(LineDataSet.Mode.CUBIC_BEZIER);//曲线
                d.setMode(LineDataSet.Mode.LINEAR);//折现
//           d.setCircleColor(color);
                dataSets.add(d);

            }

            LineData data = new LineData(dataSets);
            this.setData(data);
        }

            this.invalidate();
            //TODO 设置完数据后。必须设置完数据后才有效设置最大显示15个。多的话需要滑动查看,最少也要15.这样就固定。 就算只有1个。还是在固定的位置。
            setVisibleXRangeMaximum(15);
            setVisibleXRangeMinimum(13);

    }

}

2.布局文件里面，引用自己封装的MylineChart

<com.lyf.demo.view.MPChart.MyLineChart
            android:id="@+id/lineChart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/rl_title"
            android:layout_marginBottom="10dp" />

3.在activity里面拿到MyLineChart对象。然后设置数据调用MyLineChart对象的setLineChartData()。

(1)看一下我们的网络数据是一个list，里面的BarDateBean内容

public class BarDataBean  implements Serializable {
  
   private String ssdsmc;//城市，或者区县  x轴内容
   private float ybr;//  订单个数  y轴内容
   private float xgm;//  订单个数  y轴内容
   private float hj;//合计
 
    public BarDataBean(String ssdsmc, float ybr, float xgm, float hj) {
        this.ssdsmc = ssdsmc;
        this.ybr = ybr;
        this.xgm = xgm;
        this.hj = hj;
    }
 
   //set,get方法我这里就不粘贴了。
}

（2）得到网络数据后我们如何给柱状图设置数据代码如下。

private String[] mSsLable = new String[]{"手机", "电脑"};//图例

ArrayList<BarEntry> values = new ArrayList<>();//柱状图需要的数据，values是网络得到的数据。得到数据后调用setChartData方法设置数据就可以。（values的数据可以自己模拟几条感受一下）

private void setChartData() {
    
        getLineChartData();
        setXAxis(lineChart.getXAxis());
        lineChart.setLineChartData(lineDataList, mSsLable);

    }

   /**
     * 把得到的网络是数据转为lineChart需要的数据类型。
     */
    private void getLineChartData() {//这里我是知道了。只有2条线。两条数据。多的话，需要多条处理
        lineDataList.clear();
        for (int z = 0; z < mSsLable.length; z++) {

            ArrayList<Entry> values = new ArrayList<>();

            for (int i = 0; i < valueList.size(); i++) {
                if (z == 0) {
                    values.add(new Entry(i, (float) valueList.get(i).getYbr()));
                } else {
                    values.add(new Entry(i, (float) valueList.get(i).getXgm()));
                }
            }
            lineDataList.add(values);
        }
    }

  private void setXAxis(XAxis xAxis) {
        /**  (1)第一种就是先给x轴设置ValueFOrmatter，然后这里直接刷新。（2）或者就是不设置。这里直接设置。
         第一种更新一下，x轴的数据。这样到x轴得到了更新，点击某个弹出的悬浮框内容也得到了更新。或者悬浮框也在这里设置market*/
//        ((StringDataAxisValueFormatter)mXAxisFormatter).refreshList(valueList);

        StringDataAxisValueFormatter xFormatter = new StringDataAxisValueFormatter() {  //设置每个x轴的内容
            @Override
            public String getFormattedValue(float value) {//这个value是那边BarEntry得到的x的值。
                try {
                   String cityName= (valueList.get((int) value)).getSsdsmc();
                   if(cityName.length()>4){
                           String bb = cityName.substring(0, 3);
                           cityName=bb+"...";
                   }
                    return cityName;
                } catch (Exception e) {
                    e.printStackTrace();
                    return "";
                }

            }
        };
        xAxis.setValueFormatter(xFormatter);
      
        int lineLayoutId=R.layout.my_custom_line_marker_view;
       
        MyCustomMarkerView lineMv = new MyCustomMarkerView(this, valueList,lineLayoutId);

//        mv.setChartView(lineChart); // For bounds control
        
        lineChart.setMarker(lineMv);//折线图设置market
        xAxis.setLabelCount(valueList.size());//TODO 这里决定者x轴显示的个数  拿到数据库再设置显示个数,也不确定起作用了没，反正后面加上true。就都乱了
    }

（3）MyCustomMarkerView的代码可以参照我的上一篇文章。有代码

https://blog.csdn.net/bangyiqing/article/details/107068655