以前有寫過一個圖表lib，可是開發的速度，大多很難跟上產品需求變化的腳步，因此修改了下原先的圖表庫，支持圖表下面能整合table顯示對應的類目，用曲線替換了折線，支持多曲線的顯示，增長了顯示的動畫，，增長了一些可定製的屬性，支持水平柱狀圖和疊加柱狀圖，以及多曲線圖和餅狀圖的顯示html
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"//一個屏幕中顯示多少列
app:y_interval="40dp"//Y軸的間距
app:y_num_text_max_width="56dp"//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同樣
3.實現的幾個關鍵點
3.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));
3.2 規劃固定的區域，在超出區域的部分不可見，這個在以前用的bitmap來實現，總感受彆扭，後面讀官方的源碼的時候，瞭解了canvas的clipRect方法，咱們在繪製這塊的時候，onDraw方法中調用
int clipRestoreCount = canvas.save();
canvas.clipRect(mContentRect);//繪製以前調用
doDraw();//進行想要的繪製
canvas.restoreToCount(clipRestoreCount);//繪製完成調用restoreToCount恢復到繪製這塊以前的狀態
3.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度繪製的感受，那個柱狀圖的動畫也是同樣的，以不變應萬變。java
3.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座標和彎曲係數android
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;
}
3.library引入方式
step 1. Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
compile 'com.github.WelliJohn:charts:1.0.0'
}
github地址,您的點贊和star是我繼續開源的最大動力。git