1. 程式人生 > >使用hellocharts繪製折線圖 並自定義Y軸

使用hellocharts繪製折線圖 並自定義Y軸

效果圖

1、hellocharts 的引用 在app的   build.gradle 中新增   compile 'com.github.lecho:hellocharts-library:[email protected]' 並再次編譯即可

2、hellocharts的使用  佈局檔案 <lecho.lib.hellocharts.view.LineChartView        android:id="@+id/linechart"        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="10dp"        android:paddingTop="10dp" />主要程式碼:
    private LineChartView chartTop;    String[] dateX = {"6-04","6-05","6-06","6-07","6-08","6-09","6-10"};//X軸的標註    int[] money= {1000,420,900,330,1000,740,2300};//圖表的資料點    float[] dataY = {0,400,800,1200,1600,2000,2400};//Y軸的標註    private List<PointValue> mPointValues = new ArrayList<PointValue>();    private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();@Override    protected void findViews() {        chartTop = findViewById(R.id.linechart);    }    @Override    protected void initViews(Bundle savedInstanceState) {        initAxisXLables();//獲取x軸的標註        initAxisPoints();//獲取座標點        initLineChart();//初始化    }/**     * 設定X 軸的顯示     */    private void initAxisXLables(){        for (int i = 0; i < dateX.length; i++) {            mAxisXValues.add(new AxisValue(i).setLabel(dateX[i]));        }    }    /**     * 圖表的每個點的顯示     */    private void initAxisPoints() {        for (int i = 0; i < money.length; i++) {            mPointValues.add(new PointValue(i, money[i]));        }    }private void initLineChart(){        Line line = new Line(mPointValues).setColor(Color.parseColor("#5E8BDF"));  //折線的顏色        List<Line> lines = new ArrayList<Line>();        line.setShape(ValueShape.CIRCLE);//折線圖上每個資料點的形狀  這裡是圓形 (有三種 :ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.SQUARE)        line.setCubic(false);//曲線是否平//    line.setStrokeWidth(3);//線條的粗細,預設是3        line.setFilled(true);//是否填充曲線的面積        line.setHasLabels(true);//曲線的資料座標是否加上備註        line.setFormatter(new SimpleLineChartValueFormatter(2));//設定顯示小數點//line.setHasLabelsOnlyForSelected(true);//點選資料座標提示資料(設定了這個line.setHasLabels(true);就無效)        line.setHasLines(true);//是否用直線顯示。如果為false 則沒有曲線只有點顯示        line.setHasPoints(true);//是否顯示圓點 如果為false 則沒有原點只有點顯示        line.setStrokeWidth(1);        line.setPointRadius(3);        lines.add(line);        LineChartData data = new LineChartData();        data.setValueLabelBackgroundColor(Color.TRANSPARENT);        data.setValueLabelBackgroundAuto(true);        data.setValueLabelBackgroundEnabled(true);        data.setValueLabelTextSize(6);        data.setValueLabelsTextColor(Color.WHITE);  //此處設定座標點旁邊的文字顏色        data.setLines(lines);        //座標軸        Axis axisX = new Axis(); //X軸        axisX.setHasTiltedLabels(false);  //X軸下面座標軸字型是斜的顯示還是直的,true是斜的顯示//    axisX.setTextColor(Color.WHITE);  //設定字型顏色        axisX.setTextColor(Color.GRAY);//灰色        axisX.setTextSize(7);//設定字型大小        axisX.setMaxLabelChars(0); //最多幾個X軸座標,意思就是你的縮放讓X軸上資料的個數7<=x<=mAxisValues.length        axisX.setValues(mAxisXValues);  //填充X軸的座標名稱        data.setAxisXBottom(axisX); //x 軸在底部        axisX.setHasLines(false); //x 軸分割線        // Y軸是根據資料的大小自動設定Y軸上限(在下面我會給出固定Y軸資料個數的解決方案)        Axis axisY = new Axis();  //Y軸        axisY.setName("");//y軸標註        axisY.setTextSize(8);//設定字型大小        axisY.setHasLines(true);        axisY.setMaxLabelChars(6);//max label length, for example 60 // 這樣新增y軸座標 就可以固定y軸的資料        List<AxisValue> values = new ArrayList<>();        for(int i = 0; i < dataY.length; i++){            AxisValue value = new AxisValue(dataY[i]);            values.add(value);        }        axisY.setValues(values);        data.setAxisYLeft(axisY);  //Y軸設定在左邊        //data.setAxisYRight(axisY);  //y軸設定在右邊        //設定行為屬性,支援縮放、滑動以及平移        chartTop.setInteractive(false);        chartTop.setZoomType(ZoomType.HORIZONTAL);        chartTop.setMaxZoom((float) 1);//最大放大比例        chartTop.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);        chartTop.setLineChartData(data);        chartTop.setVisibility(View.VISIBLE);        /**注:下面的7,10只是代表一個數字去類比而已         * 當時是為了解決X軸固定資料個數。見(http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2);         */        Viewport v = new Viewport(chartTop.getMaximumViewport());        v.left = 0;        v.right= 7;        v.bottom = 0;        chartTop.setCurrentViewport(v);    }