首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在MPAndroidChart中将定制的值和每条图像放入其中?

如何在MPAndroidChart中将定制的值和每条图像放入其中?
EN

Stack Overflow用户
提问于 2018-03-14 14:19:20
回答 1查看 2.6K关注 0票数 4

背景

我使用MPAndroidChart显示一个相对简单的条形图。

问题所在

有两件事我需要设置,我不知道如何定制:

  1. 而不是简单的值,我需要添加每个栏的文本,这本身也是样式。
  2. 在每个条形图的顶部,我需要放置各种类型的绘图,以覆盖它的宽度(例如,在一个条形图中蓝色的高度为2dp,或在另一个条形图上有相同高度的黄色渐变)。

这里展示了我需要做的事情:

我所发现的

  1. 我已经检查了这些文档,但是到目前为止我发现的唯一一件事就是使用setDrawValueAboveBarhttps://github.com/PhilJay/MPAndroidChart/wiki/Specific-Chart-Settings-&-Styling将值放在栏上方。
  2. 我知道我也可以添加图标,通过使用setDrawIcons,但这似乎不适用于应该采取整个条形宽度的绘图。

问题

正如我所写的,我想知道上述情况是否可能,以及如何做到:

  1. 如何在每个条形上设置一个自定义的、样式化的值?
  2. 我怎样才能设置一个不同的抽屉“坐”在每个酒吧顶部?
  3. 如果#2是不可能的(即使是这样的话),是否有可能设置一个可绘制的条本身?例如,一些条形将是一个坚实的灰色颜色,而有些条形将有一个渐变黄色可拉?
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-16 06:19:04

您需要自定义条形BarChartRenderer来实现这一点。我提供了一个粗略的样品。希望能帮上忙。

用于设置条形图的代码

代码语言:javascript
复制
    public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // custom colors that you want on top of the bars
        ArrayList<Integer> myColors = new ArrayList<>();
        myColors.add(Color.BLACK);
        myColors.add(Color.YELLOW);
        myColors.add(Color.BLUE);
        myColors.add(Color.DKGRAY);
        myColors.add(Color.GREEN);
        myColors.add(Color.GRAY);

        String[] myText = {"A Round", "B Round", "C Round", "D Round", "E Round", "F Round"};


        BarChart mChart = (BarChart) findViewById(R.id.barChart);
        mChart.setDrawBarShadow(false);
        mChart.getDescription().setEnabled(false);
        mChart.setDrawGridBackground(false);

        XAxis xaxis = mChart.getXAxis();
        xaxis.setDrawGridLines(false);
        xaxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        xaxis.setDrawLabels(true);
        xaxis.setDrawAxisLine(false);

        YAxis yAxisLeft = mChart.getAxisLeft();
        yAxisLeft.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
        yAxisLeft.setDrawGridLines(false);
        yAxisLeft.setDrawAxisLine(false);
        yAxisLeft.setEnabled(false);

        mChart.getAxisRight().setEnabled(false);
        // set your custom renderer
        mChart.setRenderer(new BarChartCustomRenderer(mChart, mChart.getAnimator(), mChart.getViewPortHandler(), myColors));
        mChart.setDrawValueAboveBar(true);

        Legend legend = mChart.getLegend();
        legend.setEnabled(false);

        ArrayList<BarEntry> valueSet1 = new ArrayList<BarEntry>();

        for (int i = 0; i < 6; ++i) {
            BarEntry entry = new BarEntry(i, (i + 1) * 10);
            valueSet1.add(entry);
        }


        List<IBarDataSet> dataSets = new ArrayList<>();
        BarDataSet barDataSet = new BarDataSet(valueSet1, " ");
        barDataSet.setValueFormatter(new MyFormatter(myText));
        barDataSet.setColor(Color.CYAN);
        dataSets.add(barDataSet);

        BarData data = new BarData(dataSets);
        mChart.setData(data);
    }


    public class MyFormatter implements IValueFormatter {

        String[] text;

        public MyFormatter(String[] text) {
            this.text = text;
        }

        @Override
        public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
            return String.valueOf((int)value)+"M" + ", " + text[(int) entry.getX()];
        }
    }


}

自定义渲染器

代码语言:javascript
复制
    public class BarChartCustomRenderer extends BarChartRenderer {

    private Paint myPaint;
    private ArrayList<Integer> myColors;

    public BarChartCustomRenderer(BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler, ArrayList<Integer> myColors) {
        super(chart, animator, viewPortHandler);
        this.myPaint = new Paint();
        this.myColors = myColors;
    }

    @Override
    public void drawValues(Canvas c) {
        super.drawValues(c);
        // you can modify the original method
        // so that everything is drawn on the canvas inside a single loop
        // also you can add logic here to meet your requirements
        int colorIndex = 0;
        for (int i = 0; i < mChart.getBarData().getDataSetCount(); i++) {
            BarBuffer buffer = mBarBuffers[i];
            float left, right, top, bottom;
            for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) {
                myPaint.setColor(myColors.get(colorIndex++));
                left = buffer.buffer[j];
                right = buffer.buffer[j + 2];
                top = buffer.buffer[j + 1];
                bottom = buffer.buffer[j + 3];
//                myPaint.setShader(new LinearGradient(left,top,right,bottom, Color.CYAN, myColors.get(colorIndex++), Shader.TileMode.MIRROR ));
                c.drawRect(left, top, right, top+5f, myPaint);
            }
        }
    }

    @Override
    public void drawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) {
        String text = formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler);
        String[] splitText;
        if(text.contains(",")){
            splitText = text.split(",");
            Paint paintStyleOne = new Paint(mValuePaint);
            Paint paintStyleTwo = new Paint(mValuePaint);
            paintStyleOne.setColor(Color.BLACK);
            paintStyleTwo.setColor(Color.BLUE);
            c.drawText(splitText[0], x, y-20f, paintStyleOne);
            c.drawText(splitText[1], x, y, paintStyleTwo);
        }
        //else{
//            super.drawValue(c, formatter, value, entry, dataSetIndex, x, y, color);
        //}
    }
}

结果

还可以通过稍微修改自定义呈现器对整个条形图进行梯度效果:

代码语言:javascript
复制
myPaint.setShader(new LinearGradient(left,top,right,bottom, Color.CYAN, myColors.get(colorIndex++), Shader.TileMode.MIRROR ));
c.drawRect(left, top, right, bottom, myPaint);

您也可以使用自定义呈现器绘制和样式文本。请查看this以了解有关自定义呈现器的更多信息。

更新用于使用可绘图而不是颜色

代码语言:javascript
复制
//get bitmap from a drawable
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.myDrawable);

之后,您可以创建一个位图列表,并将其传递给渲染器,而不是颜色列表。

如果您想要在条形图的顶部进行绘图,可以使用以下命令:

代码语言:javascript
复制
c.drawBitmap(bitmap.get(index++), null, new RectF(left, top, right, top+5f), null);

或者,如果要覆盖整个条形图,可以使用如下位图:

代码语言:javascript
复制
c.drawBitmap(bitmap.get(index++), null, new RectF(left, top, right, bottom), null);
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49280103

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档