MPAndroidChart在x轴上自动缩放BarChart

时间:2014-10-29 14:19:45

标签: android mpandroidchart

我正在查看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中声明的内容。我怎么能这样做?

3 个答案:

答案 0 :(得分:4)

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

所以你应该打电话给:

setScaleMinima(2f, 1f)

仅设置缩放范围,但没有实际缩放。

然后使用方法

zoom(...)可放大到您想要的位置。

答案 1 :(得分:0)

我不知道BarChart库,但很容易自己实现。 我会粘贴一个片段,我最近制作,希望这有帮助。

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" />
{...}

答案 2 :(得分:0)

您可以使用以下方法完成您的任务

限制可见的东西

  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):设置当前视口的自定义偏移量(实际图表窗口两侧的偏移量)。设置此项将阻止图表自动计算其偏移量。使用 resetViewPortOffsets() 撤消此操作。仅当您知道自己在做什么时才使用它。 5.resetViewPortOffsets():重置所有通过 setViewPortOffsets(...) 方法设置的自定义偏移量。允许图表再次自动计算所有偏移。
  5. setExtraOffsets(float left, float top, float right, float bottom):设置额外的偏移量(围绕图表视图)附加到自动计算的偏移量。这不会更改自动计算的偏移量,但会为它们增加额外的空间。