1. 程式人生 > >HelloCharts圖表庫之折線圖

HelloCharts圖表庫之折線圖

<?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中的處理
步驟:

  1. 找到控制元件。
  2. 初始化資料。
  3. 給控制元件填充資料。
  4. 設定點選事件等。

詳細設定見程式碼:

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; } }