Android簡易柱状図と曲線グラフ実現
10177 ワード
以前はグラフlibを書いたことがありますが、開発のスピードは、製品のニーズの変化に追いつくことが難しいことが多いので、元のグラフライブラリを修正し、グラフの下にtable表示対応のクラスを統合し、曲線で折れ線を置き換え、多曲線の表示をサポートし、表示のアニメーションを追加し、カスタマイズ可能な属性を追加し、水平柱状図と重ね合わせ柱状図をサポートしました.マルチグラフと円グラフの表示
1.効果図
2.各種グラフの使い方
1.円グラフこれは元の使用と同じで、ただ1つのアニメーションを追加しただけで、前の文章を参照することができて、円グラフは使用します.
2.水平多柱図
2.1 xmlレイアウト
2.2データ設定
3.重ね合わせ柱状図
3.1 xmlレイアウト
3.2データ設定、2.2のように
3.実装されたいくつかのキー
3.1幅は、コントロールの幅がスクリーンの幅よりも大きいため、表示されるx軸の点と間隔、y軸座標の文字の幅の距離によって構成されているため、onMeasureを書き換える必要があります.
3.2計画固定のエリアは、エリアを超えた部分では見えませんが、これは前に使っていたbitmapで実現されていて、なんだか違和感があります.後に公式のソースコードを読むとき、canvasのclipRectメソッドを理解しました.私たちはこれを描くとき、onDrawメソッドで呼び出します.
3.3アニメーションは基本的にValueAnimatorで実現できます.例えば、円グラフ:彼の1つの描画は0-360の角度の転換で、私たちは
それからmDrawAngleで毎回描く角度を制御して、このように0-360度から描く感じがして、その柱状図のアニメーションも同じで、変わらないで万変します.
3.4ベッセル曲線描画のアルゴリズム
ベッセル曲線を描くとき、これらの制御点の計算規則をよく調べてみると、3点に基づいて2つの制御点を計算することがありますが、このように3点の内部曲線を描くのは滑らかですが、次の4番目の点のつながりの時、あまりよくない感じがしますので、私はやはり上の計算方法で制御点を計算して、アルゴリズムを貼り付けました.パラメータはそれぞれ1,2,3のx座標とy座標と曲げ係数である.
githubアドレスもし皆さんが良い考えがあれば、交流してほしいです.もし文章があなたのカスタムviewに役立つと思ったら、いいねや注目してほしいです.ありがとうございます.
1.効果図
2.各種グラフの使い方
1.円グラフこれは元の使用と同じで、ただ1つのアニメーションを追加しただけで、前の文章を参照することができて、円グラフは使用します.
2.水平多柱図
2.1 xmlレイアウト
y_visible_num：y 2.2データ設定
public class HorBarActivity extends AppCompatActivity {
//
private ChartLine mChartline;
//
private List> 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 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 categoryValueList;
* }
*/
private void initCategoryList() {
mCategoryList = new ArrayList<>();
mCategoryList.add(new CategoryVo());
mCategoryList.add(new CategoryVo());
mCategoryList.add(new CategoryVo());
}
/**
* ,private List> mMulListDisDots;
* List> ，
*/
private void initMulTestData() {
mMulListDisDots = new ArrayList<>();
for (int i = 0; i < 3; i++) {
ArrayList 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レイアウト
3.2データ設定、2.2のように
3.実装されたいくつかのキー
3.1幅は、コントロールの幅がスクリーンの幅よりも大きいため、表示されるx軸の点と間隔、y軸座標の文字の幅の距離によって構成されているため、onMeasureを書き換える必要があります.
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で実現できます.例えば、円グラフ:彼の1つの描画は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度から描く感じがして、その柱状図のアニメーションも同じで、変わらないで万変します.
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);}ベッセル曲線を描くとき、これらの制御点の計算規則をよく調べてみると、3点に基づいて2つの制御点を計算することがありますが、このように3点の内部曲線を描くのは滑らかですが、次の4番目の点のつながりの時、あまりよくない感じがしますので、私はやはり上の計算方法で制御点を計算して、アルゴリズムを貼り付けました.パラメータはそれぞれ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;
}githubアドレスもし皆さんが良い考えがあれば、交流してほしいです.もし文章があなたのカスタムviewに役立つと思ったら、いいねや注目してほしいです.ありがとうございます.