HelloCharts圖表庫之柱狀圖
阿新 • • 發佈:2019-01-26
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<lecho.lib.hellocharts.view.ColumnChartView
android:id ="@+id/ccv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2,在Activity中的處理
步驟:
- 找到控制元件
- 初始化資料
- 設定資料
設定點選事件
詳細設定見程式碼:
public class MyColumnChartActivity extends Activity {
private ColumnChartView chart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mycolumnchart);
chart = (ColumnChartView) findViewById(R.id.ccv);
chart.setOnValueTouchListener(new ColumnChartOnValueSelectListener() {
@Override
public void onValueSelected(int i, int i1, SubcolumnValue subcolumnValue) {
Toast.makeText(MyColumnChartActivity.this, "i:" + i + ",i1:" + i1, Toast.LENGTH_SHORT).show();
}
@Override
public void onValueDeselected() {
Toast.makeText(MyColumnChartActivity.this, "黑人???", Toast.LENGTH_SHORT).show();
}
});
generateData();
}
private void generateData() {
//一個柱狀圖需要一個柱子集合
List<Column> columnList = new ArrayList<>();
//每根柱子又可以分為多根柱子
List<SubcolumnValue> subcolumnValueList;
int columns = 7;//一共7根柱子
int subColumn = 1;//每根柱子的子柱子為1根
for (int i = 0; i < columns; i++) {
subcolumnValueList = new ArrayList<>();
for (int j = 0; j < subColumn; j++) {
//每根子柱子需要一個值和顏色
subcolumnValueList.add(new SubcolumnValue((float) Math.random(), ChartUtils.pickColor()));
}
//每根柱子需要一個子柱子集合
Column column = new Column(subcolumnValueList);
//這一步是能讓圓柱標註資料顯示帶小數的重要一步
ColumnChartValueFormatter chartValueFormatter = new SimpleColumnChartValueFormatter(2);
column.setFormatter(chartValueFormatter);
column.setHasLabels(true);//是否直接顯示標註(其它的一些設定類似折線圖)
columnList.add(column);
}
ColumnChartData data = new ColumnChartData(columnList);
Axis axisX = new Axis();
Axis axisY = new Axis().setHasLines(true);
axisX.setName("段位");
axisY.setName("出場率%");
axisY.hasLines();//是否顯示網格線
axisY.setTextColor(Color.BLACK);//顏色
//給軸設定值
List<AxisValue> list = new ArrayList<>();
for (int i = 0; i < 7; i++) {
list.add(new AxisValue(i).setLabel("周" + (i + 1)));//i代表位置,label則是在軸上該位置的標註
}
//給x軸設定值
axisX.setValues(list);
data.setAxisXBottom(axisX);
//設定是否讓多根子柱子在同一根柱子上顯示(會以斷層的形式分開),由於這裡子柱子只有一根,故設定true也無意義,讀者可自行嘗試
data.setStacked(false);
chart.setColumnChartData(data);
}
}
4,HelloCharts還支援數值變化時的動畫效果
使用chart.startDataAnimation()即可產生動畫,在呼叫該方法前讓數值化生變化即可觀察到動畫效果
prepareDataAnimation();//執行動畫前改變數值
chart.startDataAnimation();
private void prepareDataAnimation() {
for (Column column : data.getColumns()) {
for (SubcolumnValue value : column.getValues()) {
value.setTarget((float) Math.random() * 100);
}
}
}
5,HelloChrts預設支援縮放效果
chart.setZoomType(ZoomType.HORIZONTAL);設定縮放模式(水平縮放,垂直縮放,雙向縮放)
chart.setZoomEnabled(true);設定是否可以縮放
效果圖: