MPAndroidChart实现-----折线图+柱状图 CombinedChart的使用

lusanren110

于 2022-06-27 16:13:04 发布

阅读量1.5k

点赞数 2

分类专栏： Android MPAndroidChart 图标文章标签： android

原文链接：https://blog.csdn.net/bangyiqing/article/details/108510463

版权

Android 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

MPAndroidChart

1 篇文章 0 订阅

订阅专栏

图标

1 篇文章 0 订阅

订阅专栏

搬运工，用来记录一下

首先来看效果图：效果图如下。是折线图和柱状图组合展示图表

下面上代码。

（1）首先布局文件里面引入CombinedChart

<com.github.mikephil.charting.charts.CombinedChart
    android:id="@+id/combined_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_below="@+id/rl_title"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="5dp"
    />

下面在activity里面写初始化chart和设置数据的一系列代码

（2）在activity的onCreate方法中。调用initChart。初始化图表。

 /**
     * 初始化Chart
     */
    private void initChart() {
        //不显示描述内容
        combinedChart.getDescription().setEnabled(false);
 
//        combinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
//                CombinedChart.DrawOrder.BAR,
//                CombinedChart.DrawOrder.LINE
//        });
        combinedChart.setBackgroundColor(Color.WHITE);
        combinedChart.setDrawGridBackground(false);
        combinedChart.setDrawBarShadow(false);
        combinedChart.setHighlightFullBarEnabled(false);
        //显示边界,就是最上面的一条线加粗的
        combinedChart.setDrawBorders(false);
        combinedChart.setPinchZoom(false);//设置true支持两个指头向X、Y轴的缩放，如果为false，只能支持X或者Y轴的当方向缩放
        //设置是否可以拖拽,true可以左右滑动
        combinedChart.setDragEnabled(true);
        //设置是否可以缩放，false不可以放大缩小
        combinedChart.setScaleEnabled(false);
        //图例说明
        Legend legend = combinedChart.getLegend();
        legend.setEnabled(false);  //不显示图例 底部的什么颜色代表什么的说明
 
        //Y轴设置
        combinedChart.getAxisRight().setDrawGridLines(false);
        combinedChart.getAxisRight().setAxisMinimum(0f);
        combinedChart.getAxisRight().setLabelCount(8, true);
        combinedChart.getAxisLeft().setLabelCount(8, true);
//        combinedChart.getAxisLeft().setDrawGridLines(false);
        combinedChart.getAxisLeft().setAxisMinimum(0f);
 
//        去掉左右边线：
//        combinedChart.getAxisLeft().setDrawAxisLine(false);
//        combinedChart.getAxisRight().setDrawAxisLine(false);
 
        XAxis bottomAxis = combinedChart.getXAxis();
        bottomAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        bottomAxis.setGranularity(1f);
        bottomAxis.setLabelRotationAngle(-60);//设置x坐标的文字倾斜。为倾斜60°
        bottomAxis.setDrawGridLines(false);//去掉x轴的网格竖线
//        mCombinedChart.animateX(2000); // 立即执行的动画,x轴
    }

（3）设置chart数据。根据自己的需求。我这里是网络访问接口拿到数据之后。调用showDataOnChart

此方法里面设置x轴的数据。定义混合图表的data。然后data里面放折线图的数据和柱状图的数据。再把data数据设置给combineChart。调用combinedChart.invalidate()更新数据。

 /**
     * 展示数据
     */
    private void showDataOnChart() {
 
        setAxisXBottom();//设置x轴的数据，并是点击的marketview
        //绘制图表数据
        data = new CombinedData();
        //设置折线图数据
        data.setData(getLineData());
        //设置柱状图数据
        data.setData(getBarData());
 
        combinedChart.setData(data);//把数据设置给混合图表
        combinedChart.invalidate();//更新数据
        combinedChart.setVisibleXRangeMaximum(11);//设置图表最大可见和最小可见个数。既可以固定可见个数。这样少了也是固定宽度。不会变大。如果大于可见宽度则可以滑动查看
        combinedChart.setVisibleXRangeMinimum(11);
//        combinedChart.animateX(2000);
 
    }

下面看具体的getAxisXBottom()和getLineDate()和getBarDate()的具体方法。这里的图例暂时没用。效果图的图例是写的view。放在图表上面的布局。遇到的技术问题。都在下面代码中注释说明了。

 
 /**
     * 设置横坐标数据
     */
    private void setAxisXBottom() {
        XAxis bottomAxis = combinedChart.getXAxis();
        bottomAxis.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                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 "";
                }
 
            }
        });
        CloudTicketMarkerView barMv = new CloudTicketMarkerView(this, valueList);
        combinedChart.setMarker(barMv); // 柱状图设置market
 
        if (valueList.size() == 3) {
            bottomAxis.setLabelCount(valueList.size(), true);//TODO 解决当只有3条数据的时候。第二条x轴不显示横坐标
        } else {
            bottomAxis.setLabelCount(valueList.size() - 1, false); //TODO  ---这里的问题解决，x轴一直错位，或者x轴显示内容比较乱情况
        }
    }
 
 
 
 
 
/**
     * 设置折线图绘制数据
     *
     * @return
     */
    public LineData getLineData() {
        int jineColor = ContextCompat.getColor(this, R.color.hushu_color);
        LineData lineData = new LineData();
        List<Entry> customCounts = new ArrayList<>();
        //人数
        for (int i = 0; i < valueList.size(); i++) {
            customCounts.add(new Entry(i, valueList.get(i).getHjhs()));
        }
        LineDataSet lineDataSet = new LineDataSet(customCounts, "平均温度");
        lineDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
        lineDataSet.setColor(jineColor);
        lineDataSet.setCircleColor(jineColor);
        lineDataSet.setCircleRadius(3);
        lineDataSet.setLineWidth(2);
        lineDataSet.setValueTextSize(12);
        lineDataSet.setValueTextColor(jineColor);
        lineData.addDataSet(lineDataSet);
        lineData.setDrawValues(false);//设置是否显示数据点的数值
        return lineData;
    }
 
 
 
 
 
 
    /**
     * 设置柱状图绘制数据
     *
     * @return
     */
    public BarData getBarData() {
        int hushuColor = ContextCompat.getColor(this, R.color.jine_color);
 
        BarData barData = new BarData();
        //总量金额
        List<BarEntry> amounts = new ArrayList<>();
        //添加数据
        for (int i = 0; i < valueList.size(); i++) {
            amounts.add(new BarEntry(i, valueList.get(i).getHjje()));
//            averages.add(new BarEntry(i,j[i]));
        }
        //设置总数的柱状图
        BarDataSet amountBar = new BarDataSet(amounts, "蒸发量");
        amountBar.setAxisDependency(YAxis.AxisDependency.LEFT);
        amountBar.setColor(hushuColor);
        amountBar.setValueTextSize(10);
        barData.addDataSet(amountBar);
        //设置柱状图显示的大小
        float barWidth = 0.4f;
        barData.setBarWidth(barWidth);
        barData.setDrawValues(false);//设置是否显示数据点的数值
        //以下是为了解决 柱x状图 左右两边只显示了一半的问题 根据实际情况 而定
        combinedChart.getXAxis().setAxisMinimum(-0.5f);
        combinedChart.getXAxis().setAxisMaximum((float) (amounts.size() - 0.5));
 
        return barData;
    }