AndroidPlot - Labels and text

问题

I am a non-developer product manager for an application built in both Android and iOS. We have a bar graph in iOS that provides text for the content of the graph. It displays Totals for each bar, and percentages for each segment of each bar.

In Android, using AndroidPlot (so I understand) we just display the bars with different color segments and no percent totals or totals. I am told by the developer that we can't show more.

I would display the images here, but stackoverflow tells me I don't have enough reputation points to do this. I have created a link to my dropbox with the images https://www.dropbox.com/sh/2uocm5bn79rerbe/AAB7s9QEEYIRIgXhKbUAaOyDa

Is it possible to use AndroidPlot to emulate this iOS chart or at least represent to same information to the end user?

回答1:

Your developer is more or less correct but you have options. Androidplot's BarRenderer by default provides only an optional label at the top of each bar, which in your iOS images is occupied by the "available", "new", "used" and "rent" label. That label appears to be unused in your Android screenshot so one option would be to utilize those labels do display your totals.

As far as exactly matching the iOS implementation with Androidplot, the missing piece is the ability to add additional labels horizontally and vertically along the side of each bar. You can extend BarRenderer to do this by overriding it's onRender(...) method. Here's a link for your developer that shows where in the code he'll want to modify onRender(...).

I'd suggest these modifications to add the vertical labels:

Invoke Canvas.save(Canvas.ALL_SAVE_FLAG) to store the default orientation of the Canvas.
Use Canvas.translate(leftX, bottom) to center on the bottom left point of the bar
Rotate the Canvas 90 degrees using Canvas.rotate(90) to enable vertical text drawing
Draw whatever text is needed along the side of the plot; 0,0 now corresponds to the bottom left corner of the bar so start there when invoking canvas.drawText(x,y).
Invoke Canvas.restore() to restore the canvas' original orientation.

After implementing the above, adding horizontal "%" labels should be self evident but if you run into trouble feel free to ask more questions along the way.

UPDATE: Here's a very basic implementation of the above. First the drawVerticalText method:

    /**
     * 
     * @param canvas
     * @param paint paint used to draw the text
     * @param text the text to be drawn
     * @param x x-coord of where the text should be drawn
     * @param y y-coord of where the text should be drawn
     */
    protected void drawVerticalText(Canvas canvas, Paint paint, String text, float x, float y) {

        // record the state of the canvas before the draw:
        canvas.save(Canvas.ALL_SAVE_FLAG);

        // center the canvas on our drawing coords:
        canvas.translate(x, y);

        // rotate into the desired "vertical" orientation:
        canvas.rotate(-90);

        // draw the text; note that we are drawing at 0, 0 and *not* x, y.
        canvas.drawText(text, 0, 0, paint);

        // restore the canvas state:
        canvas.restore();
    }

All that's left is to invoke this method where necessary. In your case it should be done once per BarGroup and should maintain a consistent position on the y axis. I added the following code to the STACKED case in BarRenderer.onRender(...), immediately above the break:

                // needed some paint to draw with so I'll just create it here for now:                
                Paint paint = new Paint();
                paint.setColor(Color.WHITE);
                paint.setTextSize(PixelUtils.spToPix(20));
                drawVerticalText(
                        canvas, 
                        paint, 
                        "test", 
                        barGroup.leftX, 
                        basePositionY - PixelUtils.dpToPix(50)); // offset so the text doesnt intersect with the origin

Here's a screenshot of the result...sorry it's so huge:

Personally, I don't care for the fixed y-position of these vertical labels and would prefer them to float along the upper part of the bars. To accomplish this I modify my invocation of drawVerticalText(...) to look like this:

                // needed some paint to draw with so I'll just create it here for now:
                Paint paint = new Paint();
                paint.setColor(Color.WHITE);
                paint.setTextSize(PixelUtils.spToPix(20));

                // right-justify the text so it doesnt extend beyond the top of the bar
                paint.setTextAlign(Paint.Align.RIGHT);
                drawVerticalText(
                        canvas,
                        paint,
                        "test",
                        barGroup.leftX,
                        bottom);

Which produces this result:

来源：https://stackoverflow.com/questions/24091390/androidplot-labels-and-text

标签

androidplot