Android實現簡易的柱狀圖和曲線圖表實例代碼

發布時間：2020-08-29 07:56:36 來源：腳本之家閱讀：233 作者：Wellijohn 欄目：移動開發

前言

之前有寫過一個圖表lib，但是開發的速度，大多很難跟上產品需求變化的腳步，所以修改了下原先的圖表庫，支持圖表下面能整合table顯示對應的類目，用曲線替換了折線，支持多曲線的顯示，增加了顯示的動畫，增加了一些可定制的屬性，支持水平柱狀圖和疊加柱狀圖，以及多曲線圖和餅狀圖的顯示，下面話不多說了，來一起看看詳細的介紹吧。

1.效果圖

2.各種圖表的使用方式

1.餅狀圖這個和原先的使用一樣，只不過增加了一個動畫，可以參看之前的文章，餅狀圖使用。

2.水平多柱狀圖

2.1 xml布局

<wellijohn.org.varchart.hor_bar_with_line_chart.ChartLine
 android:id="@+id/chartline"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@color/white"
 app:default_x_visible_num="4.2"http://一個屏幕中顯示多少列
 app:y_interval="40dp"http://Y軸的間距
 app:y_num_text_max_width="56dp"http://y軸左邊的文字的寬度 />

還有y_visible_num：y軸需要顯示幾列

2.2 數據設置

public class HorBarActivity extends AppCompatActivity {
 //顯示的坐標點
 private ChartLine mChartline;
 //多條折線的坐標點
 private List<List<DotVo>> mMulListDisDots;
 //x軸的點
 private String[] mXdots = new String[]{"08/18"
 , "08/19",
 "08/20", "08/21", "08/22", "08/23", "08/24",
 "08/25", "08/26", "08/27", "08/28", "08/29", "09/01", "09/02", "09/23",
 };
 private double mMax = 44;
 private Random rand = new Random();
 private List<CategoryVo> mCategoryList;
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_hor_bar);
 initView();
 initMulTestData();
 initCategoryList();
 try {
 mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationOpen(true).setListDisDots(mMulListDisDots).
  setCategoryList(mCategoryList).reDraw();
 } catch (YCoordinateException e) {
 Log.d("MainActivity", "onCreate: ");
 e.printStackTrace();
 }
 }
 /**
 * 柱狀圖的數據，是一個list，一個CategoryVo，就是一列中增加一個柱狀
 * CategoryVo：{
 * 卡券類目的名稱
 * private String categoryName;
 * 每個卡券類目的值
 * private List<String> categoryValueList;
 * }
 */
 private void initCategoryList() {
 mCategoryList = new ArrayList<>();
 mCategoryList.add(new CategoryVo());
 mCategoryList.add(new CategoryVo());
 mCategoryList.add(new CategoryVo());
 }
 /**
 * 初始化曲線圖,private List<List<DotVo>> mMulListDisDots;
 * List<DotVo>>就是一條曲線圖，
 */
 private void initMulTestData() {
 mMulListDisDots = new ArrayList<>();
 for (int i = 0; i < 3; i++) {
 ArrayList<DotVo> temp = new ArrayList();
 DotVo tempDotVo = new DotVo("08/18", rand.nextInt((int) mMax));
 temp.add(tempDotVo);
 DotVo tempDotVo1 = new DotVo("08/19", rand.nextInt((int) mMax));
 temp.add(tempDotVo1);
 DotVo tempDotVo2 = new DotVo("08/20", rand.nextInt((int) mMax));
 temp.add(tempDotVo2);
 DotVo tempDotVo3 = new DotVo("08/21", rand.nextInt((int) mMax));
 temp.add(tempDotVo3);
 DotVo tempDotVo4 = new DotVo("08/22", rand.nextInt((int) mMax));
 temp.add(tempDotVo4);
 DotVo tempDotVo5 = new DotVo("08/23", rand.nextInt((int) mMax));
 temp.add(tempDotVo5);
 DotVo tempDotVo6 = new DotVo("09/02", rand.nextInt((int) mMax));
 temp.add(tempDotVo6);

 mMulListDisDots.add(temp);
 }
 }
 private void initView() {
 mChartline = findViewById(R.id.chartline);
 }
}

3.疊加柱狀圖

3.1 xml布局

<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLayBarChartLine
 android:id="@+id/overlay_chart_line"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@color/white"
 android:visibility="visible"
 app:overlay_default_x_visible_num="4.2"
 app:overlay_y_interval="40dp"
 app:overlay_y_num_text_max_width="56dp" />

3.2 數據設置，如2.2一樣

4.實現的幾個關鍵點

4.1 寬度需要重寫，onMeasure，因為的控件的寬度是大于屏幕的寬度的，寬度是根據顯示的x軸的點和間距，以及y軸坐標的文字的所占的寬度的距離所組成。

 int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
 int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
 int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
 int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);
 int resultWidthSize = 0;
 int resultHeightSize = 0;
 int resultWidthMode = MeasureSpec.EXACTLY;//用來對childView進行計算的
 int resultHeightMode = MeasureSpec.EXACTLY;
 int paddingWidth = getPaddingLeft() + getPaddingRight();
 int paddingHeight = getPaddingTop() + getPaddingBottom();
 ViewGroup.LayoutParams thisLp = getLayoutParams();
 switch (widthParentMeasureMode) {
  //父類不加限制給子類
  case MeasureSpec.UNSPECIFIED:
  //這個代表在布局寫死了寬度
  if (thisLp.width > 0) {
   resultWidthSize = thisLp.width;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.UNSPECIFIED;
  }
  break;
  case MeasureSpec.AT_MOST:
  //這個代表在布局寫死了寬度
  if (thisLp.width > 0) {
   resultWidthSize = thisLp.width;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
   resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);
   resultWidthMode = MeasureSpec.AT_MOST;
  } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.AT_MOST;
  }
  break;
  case MeasureSpec.EXACTLY:
  //這個代表在布局寫死了寬度
  if (thisLp.width > 0) {
   resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
   resultWidthSize = widthParentMeasureSize;
   resultWidthMode = MeasureSpec.EXACTLY;
  } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
   resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
   resultWidthMode = MeasureSpec.AT_MOST;
  }
  break;
 }
 setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),
  MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));

4.2 規劃固定的區域，在超出區域的部分不可見，這個在之前用的bitmap來實現，總感覺別扭，后面讀官方的源碼的時候，了解了canvas的clipRect方法，我們在繪制這塊的時候，onDraw方法中調用

 int clipRestoreCount = canvas.save();
 canvas.clipRect(mContentRect);//繪制之前調用
 doDraw();//進行想要的繪制
 canvas.restoreToCount(clipRestoreCount);//繪制完成調用restoreToCount恢復到繪制這塊之前的狀態

4.3 動畫我們基本都可以用ValueAnimator來實現，比如說餅狀圖：他的一個繪制是0-360的角度的轉變，我們就可以

 private void startPathAnim(long duration) {
 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 360);
 valueAnimator.setDuration(duration);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mDrawAngle = (float) animation.getAnimatedValue();
  ViewCompat.postInvalidateOnAnimation(CirclePercentChart.this);
  }
 });
 valueAnimator.start();
 }

然后通過mDrawAngle來控制每次繪制的角度，這樣就可以有從0-360度繪制的感覺，那個柱狀圖的動畫也是一樣的，以不變應萬變。

4.4 貝塞爾曲線繪制的算法

 if (i == 0) {// 第一條為二階貝塞爾
 path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);// 起點
 } else {
 float cpx = preX + (mDots[0] - preX) / 2.0f;
 path.cubicTo(cpx, preY + (mLastHorLineY - preY) * mPhaseY,
  cpx, mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY,
  mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);}

在繪制貝塞爾曲線，我仔細去查過這些控制點的計算規則，有根據三點，來計算出兩個控制點，但是這樣繪制出來在三個點內部曲線是很平滑的，但是在接下來的第四個點的銜接的時候，感覺不是很好，所以我還是用了上面的計算方法來計算控制點，算法我貼出來，參數分別是1，2，3的x和y坐標和彎曲系數

public static ControlPonits getControlPoints(double x0, double y0, double x1, double y1, double x2, double y2, double paramCoefficient) {
 double d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
 double d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
 double fa = paramCoefficient * d01 / (d01 + d12); // scaling factor for triangle Ta
 double fb = paramCoefficient * d12 / (d01 + d12); // ditto for Tb, simplifies to fb=t-fa
 double p1x = x1 - fa * (x2 - x0); // x2-x0 is the width of triangle T
 double p1y = y1 - fa * (y2 - y0); // y2-y0 is the height of T
 double p2x = x1 + fb * (x2 - x0);
 double p2y = y1 + fb * (y2 - y0);
 ControlPonits tempControlPoints = new ControlPonits();
 tempControlPoints.beforeControlPointX = (float) p1x;
 tempControlPoints.beforeControlPointY = (float) p1y;
 tempControlPoints.afterControlPointX = (float) p2x;
 tempControlPoints.afterControlPointY = (float) p2y;
 return tempControlPoints;
 }

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Android實現簡易的柱狀圖和曲線圖表實例代碼

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Android實現簡易的柱狀圖和曲線圖表實例代碼

猜你喜歡

最新資訊

相關推薦

相關標簽