Android图表库MPAndroidChart条形图X轴显示文字或日期。

本文链接： https://blog.csdn.net/yuhang01/article/details/99714767

ps:因为公司的业务需求，需要对于复杂数据的图形显示简化，所以开始接触MPAndroid
git上官网的例子是这样的: 在这里插入图片描述
我想实现的效果是这样的:

最左边显示日期或文字

心理路程:我想实现的效果是左边的x轴显示日期，但是根据我好长时间的尝试以及百度也没有明确的答案
解决方案：
在build.gradle中导入：compile ‘com.github.PhilJay:MPAndroidChart:v3.0.0’
3.1版本以后的 IAxisValueFormatter这个接口不支持
主要实现的代码：

protected BarChart mChart;
      private int sCount = 31; //X轴坐标数据数量

       private ArrayList<String> data; //保存X轴坐标数据

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


mChart = findViewById(R.id.bc_re);

mChart.setDrawBarShadow(false);
mChart.setDrawValueAboveBar(true);
//mChart.setContentDescription("××表");
 mChart.getDescription().setEnabled(false);
 mChart.setNoDataText("666");
 mChart.setPinchZoom(false); //scaling can now only be done on x- and y-axis separately
mChart.setDrawGridBackground(false);
 mChart.getAxisRight().setEnabled(false); //不绘制右侧轴线

 data = new ArrayList<>();
 for(int i = 0; i<sCount ; i++)
 {
data.add("2019-08-"+(i+1));
 }

 XAxis xl = mChart.getXAxis();
 xl.setValueFormatter(new IAxisValueFormatter() {
  @Override
  public String getFormattedValue(float value, AxisBase axis) {
   return String.valueOf(data.get((int) value));
  }

  @Override
  public int getDecimalDigits() {
   return 0;
  }
 });
 xl.setPosition(XAxis.XAxisPosition.BOTTOM);
//xl.setLabelRotationAngle(45);  //标签倾斜
 xl.setDrawAxisLine(true);
xl.setDrawGridLines(false);
 xl.setCenterAxisLabels(false); //可不加这句，默认为false
//xl.setGranularity(sCount);  //x轴坐标占的宽度
 xl.setGranularity(1f); //x轴坐标占的宽度
//xl.setCenterAxisLabels(true);
 xl.setAxisMinimum(-0.5f); // 此轴显示的最小值
 //xl.setAxisMaximum(sCount*sCount);  // 此轴显示的最大值
 xl.setLabelCount(sCount); //显示的坐标数量

YAxis yl = mChart.getAxisLeft();
 yl.setDrawAxisLine(true);
 yl.setDrawGridLines(true);
yl.setAxisMinimum(0f);//this replaces setStartAtZero(true)

 float[] val = {25000000, 29000000 , 21000000, 22000000, 20000000, 26000000, 22000000, 20000000, 28000000, 29000000, 29000000, 24003200,26003200, 26003200 , 26003200, 26003200, 26003200, 26003200, 26003200, 26003200, 26003200, 26003200, 26003200, 26003200,26003200,26003200,26003200,26003200,26003200,26003200,26003200};
 setData(sCount, val);
 mChart.setFitBars(true);
 mChart.animateXY(2000, 2000);

Legend legend = mChart.getLegend();
legend.setEnabled(false); //不显示图例
 }

 private void setData(int count, float[] val)
 {
 //float barWidth = count-1;    //每个彩色数据条的宽度
 //float spaceForBar = count;   //每个数据条实际占的宽度
 float barWidth = 0.8f; //每个彩色数据条的宽度
     float spaceForBar = 1f; //每个数据条实际占的宽度
 ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();

 for (int i = 0; i < count; i++)
{
 //float val = (float) (Math.random() * range);
yVals1.add(new BarEntry(i * spaceForBar, val[i],
          getResources().getDrawable(R.drawable.ic_launcher_background)));
 }

 BarDataSet set1;

 if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0)
 {
set1 = (BarDataSet)mChart.getData().getDataSetByIndex(0);
set1.setValues(yVals1);
 mChart.getData().notifyDataChanged();
 mChart.notifyDataSetChanged();
 }
 else
{
 set1 = new BarDataSet(yVals1, "sss");



 ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
 dataSets.add(set1);

 BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(barWidth);
mChart.setData(data);
}
 }

xml代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondActivity">

    <com.github.mikephil.charting.charts.HorizontalBarChart
        android:id="@+id/bc_re"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

这就是完整的项目因为内容就这一个activity 所以也就不上传git了。。。。

Android图表库MPAndroidChart条形图X轴显示文字或日期。

猜你喜欢