MPAndroidChart 在 x 轴上自动缩放条形图

Question

我正在查看 mpAndroidChart 库以绘制一些图表，并且我有这段代码（用于条形图）：

chart.setDescription("");
chart.setDrawVerticalGrid(false);
chart.setDrawGridBackground(false);
chart.setDrawBarShadow(false);
chart.setDrawLegend(false);

XLabels xl = holder.chart.getXLabels();
xl.setCenterXLabelText(true);
xl.setPosition(XLabelPosition.BOTTOM);
xl.setTextSize(20f);

YLabels yl = holder.chart.getYLabels();
yl.setLabelCount(5);
yl.setTextSize(20f);

// set data
chart.setData((BarData) mChartData);
holder.chart.setScaleMinima(2f, 0f);

chart.animateY(700);

现在显示图表时，条形图已放大，但放大了太多。 事实上，我可以缩小（直到缩放适合 x 的 setScaleMinima 值）。 我希望当显示图表时，缩放正是我在 setScaleMinima 中声明的。我该怎么做？

Answer 1

将比例最小值设置为 0f 意味着您可以缩小到无穷大。将其设置为 1f 意味着您可以完全缩小以查看整个图表。

所以你应该打电话：

setScaleMinima(2f, 1f)

仅设置缩放范围，但不进行实际缩放。

那就用方法

zoom(...)放大到任何你想要的地方。

Answer 2

我不知道 BarChart 库，但你自己实现一个很容易。 我会贴一张我最近做的sn-ps，希望对你有帮助。

package com.example.preferencestest.util;

import com.example.preferencestest.R;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class MyCustomChartView extends View {
    private int width=0, height=0;

    public MyCustomChartView(Context context) {
        super(context);
        setup(null);
    }

    public MyCustomChartView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setup(attrs);
    }
    public MyCustomChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setup(attrs);
    }

    private int firstValue=0, secondValue=0, thirdValue=0, horizontalPadding=20, verticalPadding=40;
    private String title="";
    private Paint outerLine, grid, other;
    private Resources res;

    private void setup(AttributeSet attrs) {
        if (attrs != null) {
            Context ctx = getContext();
            TypedArray ta = ctx.obtainStyledAttributes(attrs, R.styleable.MyCustomCharView);
            firstValue = ta.getInt(R.styleable.MyCustomCharView_Plot_First_Value, firstValue);
            secondValue = ta.getInt(R.styleable.MyCustomCharView_Plot_Second_Value, secondValue);
            thirdValue = ta.getInt(R.styleable.MyCustomCharView_Plot_Third_Value, thirdValue);
            ta.recycle();
        }
        res = getResources();
        outerLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        outerLine.setColor(res.getColor(R.color.plot_outer_line));
        outerLine.setStrokeWidth(3);
        grid = new Paint(Paint.ANTI_ALIAS_FLAG);
        grid.setColor(res.getColor(R.color.plot_grid));
        grid.setStrokeWidth(2);
        other = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w; height = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //float width = canvas.getWidth(), height = canvas.getHeight();
        int limit = Math.max(6, Math.max(firstValue, Math.max(secondValue, thirdValue)));
        canvas.drawLine(horizontalPadding, verticalPadding, 
                horizontalPadding, height-verticalPadding, outerLine);
        canvas.drawLine(horizontalPadding, height-verticalPadding, 
                width-horizontalPadding, height-verticalPadding, outerLine);

        int gridVertMargin = Math.round((height-(verticalPadding*2))/7);
        for (int i=0; i<7; i++) {
            canvas.drawLine(horizontalPadding+1, 
                    verticalPadding+(i*gridVertMargin), 
                    width-horizontalPadding, 
                    verticalPadding+(i*gridVertMargin), grid);
        }

        int gridHoriMargin = Math.round((width-(horizontalPadding*2))/limit);
        for (int i = 0; i < limit; i++) {
            canvas.drawLine(horizontalPadding+((i+1)*gridHoriMargin), 
                    verticalPadding+1, 
                    horizontalPadding+((i+1)*gridHoriMargin), 
                    height-verticalPadding, grid);
            canvas.drawText(String.valueOf(i+1), horizontalPadding+((i+1)*gridHoriMargin)-2, height-(verticalPadding/2), outerLine);
        }

        other.setColor(res.getColor(R.color.plot_first_color));
        if (this.firstValue > 0) {
            canvas.drawRect(horizontalPadding+1, 
                    verticalPadding+(gridVertMargin*1)+1, 
                    this.firstValue*gridHoriMargin+horizontalPadding-1, 
                    verticalPadding+(gridVertMargin*2)-1, other);
        }

        other.setColor(res.getColor(R.color.plot_second_color));
        if (this.secondValue > 0) {
            canvas.drawRect(horizontalPadding+1, 
                    verticalPadding+(gridVertMargin*3)+1, 
                    this.secondValue*gridHoriMargin+horizontalPadding-1, 
                    verticalPadding+(gridVertMargin*4)-1, other);
        }

        other.setColor(res.getColor(R.color.plot_third_color));
        if (this.thirdValue > 0) {
            canvas.drawRect(horizontalPadding+1, 
                    verticalPadding+(gridVertMargin*5)+1, 
                    this.thirdValue*gridHoriMargin+horizontalPadding-1, 
                    verticalPadding+(gridVertMargin*6)-1, other);
        }
    }

    public int getFirstValue() {
        return firstValue;
    }

    public void setFirstValue(int first) {
        if (this.firstValue != first) {
            this.firstValue = first;
            invalidate();
        }
    }

    public int getSecondValue() {
        return secondValue;
    }

    public void setSecondValue(int second) {
        if (this.secondValue != second) {
            this.secondValue = second;
            invalidate();
        }
    }

    public int getThirdValue() {
        return thirdValue;
    }

    public void setThirdValue(int third) {
        if (this.thirdValue != third) {
            this.thirdValue = third;
            invalidate();
        }
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        if (! this.title.equals(title)) {
            this.title = title;
            invalidate();
        }
    }
}

您将需要一个用于 xml 样式值的 xml 文件（在本例中为第一、第二和第三条），如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyCustomCharView">
        <attr name="Plot_First_Value" format="integer" />
        <attr name="Plot_Second_Value" format="integer" />
        <attr name="Plot_Third_Value" format="integer" />
    </declare-styleable>

    <color name="plot_outer_line">#330000</color>
    <color name="plot_grid">#dd0000</color>
    <color name="plot_first_color">#99aa00</color>
    <color name="plot_second_color">#770000</color>
    <color name="plot_third_color">#00ee77</color>
</resources>

最后你可以像这样将你的新 BarChart 添加到你的布局中：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res/[yourpackage]">

        <[yourpackage].MyCustomChartView
            android:id="@+id/row_plot"
            style="@style/ListItem"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            title=""
            app:Plot_First_Value="15"
            app:Plot_Second_Value="1"
            app:Plot_Third_Value="3" />
{...}

Answer 3

您可以为您的任务使用以下方法

限制可见的内容

1. setVisibleXRangeMaximum(float maxXRange)：设置一次最大可见区域的大小（x 轴上的范围）。如果这是例如设置为 10，不滚动即可一次查看 x 轴上的值不超过 10 个。
2. setVisibleXRangeMinimum(float minXRange)：设置一次最小可见区域的大小（x 轴上的范围）。如果这是例如设置为 10，则无法在 x 轴上放大 10 个以上的值。
3. setVisibleYRangeMaximum(float maxYRange, AxisDependency axis)：设置一次最大可见区域的大小（y 轴上的范围）。您还需要提供此约束应应用于的轴。
4. setViewPortOffsets(float left, float top, float right, float bottom)：设置当前ViewPort的自定义偏移量（实际图表窗口两侧的偏移量）。设置此项将阻止图表自动计算其偏移量。使用 resetViewPortOffsets() 撤消此操作。仅当您知道自己在做什么时才使用它。 5.resetViewPortOffsets()：重置所有通过 setViewPortOffsets(...) 方法设置的自定义偏移量。允许图表再次自动计算所有偏移量。
5. setExtraOffsets(float left, float top, float right, float bottom)：设置额外的偏移量（围绕图表视图）附加到自动计算的偏移量。这不会更改自动计算的偏移量，但会增加额外的空间。