HelloChart Demo記錄

記錄HelloChart 折線圖的API

package com.example.mylinechart;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.formatter.SimpleAxisValueFormatter;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.LineChartView;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class MainActivity extends ActionBarActivity implements OnTouchListener{
    private LineChartView chart;
    private LineChartData data;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chart = (LineChartView)findViewById(R.id.chart);

        generateTempoData();
    }
@Override
public boolean onTouchEvent(MotionEvent event) {
    Log.e("super.onTouchEvent(event)", super.onTouchEvent(event)+"");
    return super.onTouchEvent(event);
}
    private void generateTempoData() {
        // I got speed in range (0-50) and height in meters in range(200 - 300). I want this chart to display both
        // information. Differences between speed and height values are large and chart doesn't look good so I need
        // to modify height values to be in range of speed values.

        // The same for displaying Tempo/Height chart.
        chart.setValueSelectionEnabled(false);
        float minHeight = 200;
        float maxHeight = 300;
        float tempoRange = 15; // from 0min/km to 15min/km

        float scale = tempoRange / maxHeight;
        float sub = (minHeight * scale) / 2;

        int numValues = 52;

        Line line;
        List<PointValue> values;
        List<Line> lines = new ArrayList<Line>();

        // Height line, add it as first line to be drawn in the background.
//        values = new ArrayList<PointValue>();
//        for (int i = 0; i < numValues; ++i) {
//            // Some random height values, add +200 to make line a little more natural
//            float rawHeight = (float) (Math.random() * 100 + 200);
//            float normalizedHeight = rawHeight * scale - sub;
//            values.add(new PointValue(i, normalizedHeight));
//        }
//
//        line = new Line(values);
//        line.setColor(Color.GRAY);
//        line.setHasPoints(false);
//        line.setFilled(true);
//        line.setStrokeWidth(1);
//        lines.add(line);

        // Tempo line is a little tricky because worse tempo means bigger value for example 11min per km is worse
        // than 2min per km but the second should be higher on the chart. So you need to know max tempo and
        // tempoRange and set
        // chart values to minTempo - realTempo.
        values = new ArrayList<PointValue>();
        for (float i = 0; i <= tempoRange; i += 0.25f) {
            // Some random raw tempo values.
            float realTempo = (float) Math.random() * 6 + 2;
            float revertedTempo = tempoRange - realTempo;
            //Log.e("MainActivity", ""+revertedTempo);
            values.add(new PointValue(i,revertedTempo));
        }


        line = new Line(values);
        //line.setColor(ChartUtils.COLOR_RED);
        //line.setHasPoints(false);
        //line.setStrokeWidth(3);
        //是否連線
        line.setHasLines(true);
        //是否顯示點
        line.setHasPoints(true);
        //點的類型
        line.setShape(ValueShape.CIRCLE);
        //折線處是否圓滑顯示
        line.setCubic(false);
        //是否折線填充至橫軸的區域
        line.setFilled(false);
        //是否顯示Labels 但是隻顯示整數
        line.setHasLabels(true);

        //是否點擊顯示Labels
        line.setHasLabelsOnlyForSelected(false);


        line.setPointColor(ChartUtils.COLOR_GREEN);
        lines.add(line);

        // Data and axes
        data = new LineChartData(lines);
        /*****************************************下座標軸*************************************************************/
        // Distance axis(bottom X) with formatter that will ad [km] to values, remember to modify max label charts
        // value.
        Axis distanceAxis = new Axis();
        distanceAxis.setName("Distance");
        //座標軸設置顏色
        distanceAxis.setTextColor(ChartUtils.COLOR_ORANGE);
        //下標單位寬度最大尺寸
        distanceAxis.setMaxLabelChars(3);
        //在Label後面加km
        distanceAxis.setFormatter(new SimpleAxisValueFormatter().setAppendedText("km".toCharArray()));
        //畫線座標對應的垂直軸線
        distanceAxis.setHasLines(true);
        //座標對應值lable 傾斜顯示
        distanceAxis.setHasTiltedLabels(true);

        /*****************************************左座標軸*************************************************************/
        // Tempo uses minutes so I can't use auto-generated axis because auto-generation works only for decimal
        // system. So generate custom axis values for example every 15 seconds and set custom labels in format
        // minutes:seconds(00:00), you could do it in formatter but here will be faster.
        List<AxisValue> axisValues = new ArrayList<AxisValue>();
        //畫左軸 刻度
        for (float i = 0; i <= tempoRange; i += 0.25f) {
            // I'am translating float to minutes because I don't have data in minutes, if You store some time data
            // you may skip translation.
            //顯示的最小刻度
            axisValues.add(new AxisValue(i).setLabel(formatMinutes(i)));
        }
        //setMaxLabelChars(i)  正常顯示爲 最小刻度*i
        Axis tempoAxis = new Axis(axisValues).setName("Tempo [min/km]").setHasLines(true).setMaxLabelChars(2)
                .setTextColor(ChartUtils.COLOR_RED).setHasTiltedLabels(true);
        data.setAxisYLeft(distanceAxis);
        data.setAxisXBottom(tempoAxis);

        /*****************************************右座標軸*************************************************************/
        // *** Same as in Speed/Height chart.
        // Height axis, this axis need custom formatter that will translate values back to real height values.
//        data.setAxisYRight(new Axis().setName("Height [m]").setMaxLabelChars(3)
//                .setFormatter(new HeightValueFormatter(scale, sub, 0)));

        // Set data
        chart.setLineChartData(data);

        // Important: adjust viewport, you could skip this step but in this case it will looks better with custom
        // viewport. Set
        // viewport with Y range 0-12;
        Viewport v = chart.getMaximumViewport();
        v.set(v.left, tempoRange, v.right, 0);
        chart.setMaximumViewport(v);
        chart.setCurrentViewport(v);

    }

    private String formatMinutes(float value) {
        StringBuilder sb = new StringBuilder();

        // translate value to seconds, for example
        int valueInSeconds = (int) (value * 60);
        int minutes = (int) Math.floor(valueInSeconds / 60);
        int seconds = (int) valueInSeconds % 60;

        sb.append(String.valueOf(minutes)).append(':');
        if (seconds < 10) {
            sb.append('0');
        }
        sb.append(String.valueOf(seconds));
        return sb.toString();
    }
    @Override
    public boolean onTouch(View arg0, MotionEvent arg1) {
        // TODO Auto-generated method stub
        return false;
    }
}