背景
我使用MPAndroidChart显示一个相对简单的条形图。
问题所在
有两件事我需要设置,我不知道如何定制:
这里展示了我需要做的事情:

我所发现的
setDrawValueAboveBar:https://github.com/PhilJay/MPAndroidChart/wiki/Specific-Chart-Settings-&-Styling将值放在栏上方。setDrawIcons,但这似乎不适用于应该采取整个条形宽度的绘图。问题
正如我所写的,我想知道上述情况是否可能,以及如何做到:
发布于 2018-03-16 06:19:04
您需要自定义条形BarChartRenderer来实现这一点。我提供了一个粗略的样品。希望能帮上忙。
用于设置条形图的代码
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()];
}
}
}自定义渲染器
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);
//}
}
}结果

还可以通过稍微修改自定义呈现器对整个条形图进行梯度效果:
myPaint.setShader(new LinearGradient(left,top,right,bottom, Color.CYAN, myColors.get(colorIndex++), Shader.TileMode.MIRROR ));
c.drawRect(left, top, right, bottom, myPaint);您也可以使用自定义呈现器绘制和样式文本。请查看this以了解有关自定义呈现器的更多信息。
更新用于使用可绘图而不是颜色
//get bitmap from a drawable
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.myDrawable);之后,您可以创建一个位图列表,并将其传递给渲染器,而不是颜色列表。
如果您想要在条形图的顶部进行绘图,可以使用以下命令:
c.drawBitmap(bitmap.get(index++), null, new RectF(left, top, right, top+5f), null);或者,如果要覆盖整个条形图,可以使用如下位图:
c.drawBitmap(bitmap.get(index++), null, new RectF(left, top, right, bottom), null);https://stackoverflow.com/questions/49280103
复制相似问题