HelloCharts圖表庫之折線圖
阿新 • • 發佈:2019-01-10
<?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.LineChartView
android:id ="@+id/lcv"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
3,在Activity中的處理
步驟:
- 找到控制元件。
- 初始化資料。
- 給控制元件填充資料。
- 設定點選事件等。
詳細設定見程式碼:
public class MyLineCharts extends Activity {
private LineChartView lcv;
private LineChartData data;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mylinechart);
lcv = (LineChartView) findViewById(R.id.lcv);
//初始化線條集合
List<Line> lines = initLine();
//初始化折線圖的資料
data = initData(lines);
//設定資料
lcv.setLineChartData(data);
//限定座標系邊界
Viewport viewport = initViewPort();
lcv.setMaximumViewport(viewport);
lcv.setCurrentViewport(viewport);//注意,此方法需在給圖表設定資料後方見效
//當折線上點被觸控時的事件
lcv.setOnValueTouchListener(new LineChartOnValueSelectListener() {
@Override
public void onValueSelected(int i, int i1, PointValue pointValue) {
//i表示的是第幾根折線,而i1表示的是這根折線上的第幾個點(以0為基準)
Toast.makeText(MyLineCharts.this, "i:" + i + ",i1:" + i1 + ",point:" + pointValue.toString(), Toast.LENGTH_SHORT).show();
}
@Override
public void onValueDeselected() {
//當點失去焦點時
Toast.makeText(MyLineCharts.this, "???", Toast.LENGTH_SHORT).show();
}
});
//設定點可以被選中
lcv.setValueSelectionEnabled(true);
}
/**
* 設定4個邊距
*/
private Viewport initViewPort() {
Viewport viewport = new Viewport();
viewport.top = 100;
viewport.bottom = 0;
viewport.left = 0;
viewport.right = 90;
return viewport;
}
/**
* 初始化線屬性
*
* @return
*/
private List<Line> initLine() {
//圖表上的曲線集合
List<Line> lineList = new ArrayList<>();
List<PointValue> pointValueList = new ArrayList<>();
//每個point對應線上的一個點
PointValue pointValue1 = new PointValue(10, 30);
pointValueList.add(pointValue1);
PointValue pointValue2 = new PointValue(20, 20);
pointValueList.add(pointValue2);
PointValue pointValue3 = new PointValue(30, 70);
pointValueList.add(pointValue3);
PointValue pointValue4 = new PointValue(40, 69);
pointValueList.add(pointValue4);
PointValue pointValue5 = new PointValue(50, 64);
pointValueList.add(pointValue5);
PointValue pointValue6 = new PointValue(60, 31);
pointValueList.add(pointValue6);
PointValue pointValue7 = new PointValue(70, 22);
pointValueList.add(pointValue7);
PointValue pointValue8 = new PointValue(80, 100);
pointValueList.add(pointValue8);
Line line = new Line(pointValueList);
//設定線條顏色
line.setColor(ChartUtils.COLORS[i]);
//設定點的型別(圓形,方形,菱形)
line.setShape(ValueShape.CIRCLE);
//設定線的型別是否為圓滑的曲線
line.setCubic(true);
//設定線上點的標註是否僅在被選中時出現
line.setHasLabelsOnlyForSelected(false);
//設定是否顯示線上點的標註
line.setHasLabels(false);
//是否顯示線條
line.setHasLines(true);
//是否顯示點
line.setHasPoints(true);
//這一步是能讓標註資料顯示帶小數的重要一步
LineChartValueFormatter chartValueFormatter = new SimpleLineChartValueFormatter(2);//2代表是2位小數點
line.setFormatter(chartValueFormatter);
lineList.add(line);
return lineList;
}
/**
* 初始化資料
*
* @return
*/
private LineChartData initData(List<Line> lines) {
LineChartData data = new LineChartData(lines);
//初始化軸
Axis axisX = new Axis();
Axis axisY = new Axis().setHasLines(true);
axisX.setName("時間");
//前加字元 注意,加字元以最後設定一次的為準
//axisX.setFormatter(new SimpleAxisValueFormatter().setPrependedText("a".toCharArray()));
//後加字元
//axisX.setFormatter(new SimpleAxisValueFormatter().setAppendedText("b".toCharArray()));
axisY.setName("銷量");
axisY.hasLines();//是否顯示網格線
axisY.setTextColor(Color.BLACK);//顏色
//設定軸
data.setAxisYLeft(axisY);
data.setAxisXBottom(axisX);
//設定負值 設定為負無窮 預設為0
data.setBaseValue(Float.NEGATIVE_INFINITY);
return data;
}
}