MPAndroidChart 自定义水平条形图
MPAndroidChart customizing horizontal BarChart
这是条形图的图片。如您所见,存在对齐问题,条形图未与标签对齐,尤其是在中间部分。此外,我希望底部轴以 10 为单位显示条形,而不是 1.2、1.4、1.6 等,因为永远不会有任何小数,所以它没有用。我还希望每个柱的值在末尾显示为一个数字,以显示每个柱的总计数。
图表图片
https://imgur.com/gallery/ThHx1eJ
造型
// All JSON entries form the MYSQL server are parsed into an ArrayList.
moodEntries = new ArrayList<>();
// For loop which dynamically adds all entries to the ArrayList
for (MoodStatsPieChartModel moodLogPieChartResponse : moodStatsPieChartModels) {
moodEntries.add(new BarEntry(moodLogPieChartResponse.getMoodBefore(), moodLogPieChartResponse.getMoodCount()));
}
-- the .getmoodBefore() will be an int value from 1 - 18 which represents a mood
and the .getmoodCount() just totals how much of each mood.
This data is stored in the internal sqlite database.
}
// custom X-axis labels
String[] values = new String[] { "Excited", "Happy", "Confident", "Proud", "Content", "Fine", "Relaxed", "Calm", "Tired", "Guilty", "Sad", "Depressed", "Embarrassed", "Upset", "Stressed", "Anxious", "Confused", "Disgusted"};
BarDataSet barDataSet = new BarDataSet(moodEntries, "");
barDataSet.setColors(color);
barDataSet.setValueTextSize(16f);
barDataSet.setValueTextColor(Color.BLACK);
BarData data = new BarData(barDataSet);
//barData.setBarWidth(1f);
data.setValueTextSize(10f);
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setLabelCount(values.length, true);
xAxis.setDrawLabels(true);
xAxis.setCenterAxisLabels(true);
xAxis.setValueFormatter(new MyXAxisValueFormatter(values));
xAxis.setGranularity(10f);
//xAxis.setGranularityEnabled(true);
//xAxis.setDrawGridLines(false);
//xAxis.setDrawAxisLine(false);
//xAxis.setDrawLabels(true);
//xAxis.setAxisMaximum(values.length);
//barChart.getXAxis().setDrawGridLines(false);
//xAxis.setAxisMinimum(values.length);
// Top Axis
YAxis yAxis = chart.getAxisLeft();
yAxis.setDrawAxisLine(false);
yAxis.setDrawGridLines(false);
//yAxis.setGranularity(1f);
yAxis.setDrawLabels(false);
//yAxis.setAxisMaximum(0f);
//yAxis.setDrawGridLinesBehindData(false);
// Bottom Axis
YAxis yAxisBottom = chart.getAxisRight();
yAxisBottom.setDrawGridLines(false);
yAxisBottom.setDrawAxisLine(false);
//yAxisBottom.setGranularity(10f);
//yAxisBottom.setDrawGridLinesBehindData(false);
//yAxisBottom.setDrawLabels(true);
//yAxisBottom.setAxisMinimum(2f);
Legend l = chart.getLegend();
l.setEnabled(false);
chart.setVisibility(View.VISIBLE);
chart.animateXY(1000, 1000);
chart.getDescription().setEnabled(false);
chart.setExtraOffsets(-10, -10, -10, -10);
chart.setDrawGridBackground(false);
chart.setDrawBarShadow(false);
chart.setDrawValueAboveBar(true);
//chart.setFitBars(true);
//chart.setMaxVisibleValueCount(100);
chart.setData(data);
chart.invalidate();
你可以试试这个:
public class ValFormatter extends ValueFormatter {
@Override
public String getFormattedValue(float value) {
if(value == Math.round(value)){ // value is an integer?
return String.valueOf((int) value);
}else{
return "";
}
}
}
和
yAxisBottom.setValueFormatter(new ValFormatter())
因为 yAxis 显示了一个范围。这样你就可以修复了。
您可以尝试使用这些行来获取 bar 的值:
data.setValueTextSize(10f)
data.setDrawValues(true)
这是条形图的图片。如您所见,存在对齐问题,条形图未与标签对齐,尤其是在中间部分。此外,我希望底部轴以 10 为单位显示条形,而不是 1.2、1.4、1.6 等,因为永远不会有任何小数,所以它没有用。我还希望每个柱的值在末尾显示为一个数字,以显示每个柱的总计数。
图表图片 https://imgur.com/gallery/ThHx1eJ
造型
// All JSON entries form the MYSQL server are parsed into an ArrayList.
moodEntries = new ArrayList<>();
// For loop which dynamically adds all entries to the ArrayList
for (MoodStatsPieChartModel moodLogPieChartResponse : moodStatsPieChartModels) {
moodEntries.add(new BarEntry(moodLogPieChartResponse.getMoodBefore(), moodLogPieChartResponse.getMoodCount()));
}
-- the .getmoodBefore() will be an int value from 1 - 18 which represents a mood
and the .getmoodCount() just totals how much of each mood.
This data is stored in the internal sqlite database.
}
// custom X-axis labels
String[] values = new String[] { "Excited", "Happy", "Confident", "Proud", "Content", "Fine", "Relaxed", "Calm", "Tired", "Guilty", "Sad", "Depressed", "Embarrassed", "Upset", "Stressed", "Anxious", "Confused", "Disgusted"};
BarDataSet barDataSet = new BarDataSet(moodEntries, "");
barDataSet.setColors(color);
barDataSet.setValueTextSize(16f);
barDataSet.setValueTextColor(Color.BLACK);
BarData data = new BarData(barDataSet);
//barData.setBarWidth(1f);
data.setValueTextSize(10f);
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setLabelCount(values.length, true);
xAxis.setDrawLabels(true);
xAxis.setCenterAxisLabels(true);
xAxis.setValueFormatter(new MyXAxisValueFormatter(values));
xAxis.setGranularity(10f);
//xAxis.setGranularityEnabled(true);
//xAxis.setDrawGridLines(false);
//xAxis.setDrawAxisLine(false);
//xAxis.setDrawLabels(true);
//xAxis.setAxisMaximum(values.length);
//barChart.getXAxis().setDrawGridLines(false);
//xAxis.setAxisMinimum(values.length);
// Top Axis
YAxis yAxis = chart.getAxisLeft();
yAxis.setDrawAxisLine(false);
yAxis.setDrawGridLines(false);
//yAxis.setGranularity(1f);
yAxis.setDrawLabels(false);
//yAxis.setAxisMaximum(0f);
//yAxis.setDrawGridLinesBehindData(false);
// Bottom Axis
YAxis yAxisBottom = chart.getAxisRight();
yAxisBottom.setDrawGridLines(false);
yAxisBottom.setDrawAxisLine(false);
//yAxisBottom.setGranularity(10f);
//yAxisBottom.setDrawGridLinesBehindData(false);
//yAxisBottom.setDrawLabels(true);
//yAxisBottom.setAxisMinimum(2f);
Legend l = chart.getLegend();
l.setEnabled(false);
chart.setVisibility(View.VISIBLE);
chart.animateXY(1000, 1000);
chart.getDescription().setEnabled(false);
chart.setExtraOffsets(-10, -10, -10, -10);
chart.setDrawGridBackground(false);
chart.setDrawBarShadow(false);
chart.setDrawValueAboveBar(true);
//chart.setFitBars(true);
//chart.setMaxVisibleValueCount(100);
chart.setData(data);
chart.invalidate();
你可以试试这个:
public class ValFormatter extends ValueFormatter {
@Override
public String getFormattedValue(float value) {
if(value == Math.round(value)){ // value is an integer?
return String.valueOf((int) value);
}else{
return "";
}
}
}
和
yAxisBottom.setValueFormatter(new ValFormatter())
因为 yAxis 显示了一个范围。这样你就可以修复了。
您可以尝试使用这些行来获取 bar 的值:
data.setValueTextSize(10f)
data.setDrawValues(true)