MPAndroidChart開源圖表庫之折線圖

標籤：

參考：http://blog.csdn.net/shineflowers/article/details/44704723

 

1.在布局檔案中加入組件

<com.github.mikephil.charting.charts.LineChart

        android:id="@+id/char1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_margin="10dp"

        android:layout_weight="1.0"

        />

 

 

2.設定圖表的屬性

        chart1 = (LineChart) findViewById(R.id.char1);

 

        lineChart.setDrawBorders(false);  //是否在折線圖上添加邊框    

        lineChart.setDescription("");// 資料描述  

        lineChart.setDescriptionTypeface(mTf);//字型

        // 如果沒有資料的時候，會顯示這個，類似listview的emtpyview   

//      lineChart.setNoDataTextDescription("You need to provide data for the chart.");    

        lineChart.setDrawGridBackground(false); // 是否顯示表格顏色    

//        lineChart.setGridBackgroundColor(Color.WHITE & 0x70FFFFFF); // 表格的的顏色，在這裡是是給顏色設定一個透明度    

        lineChart.setTouchEnabled(true); // 設定是否可以觸摸    

        // enable scaling and dragging    

        lineChart.setDragEnabled(true);// 是否可以拖拽

        lineChart.setScaleEnabled(true);// 是否可以縮放

        lineChart.setPinchZoom(false);    

        lineChart.setBackgroundColor(Color.WHITE);// 設定背景    

       

        //設定最大值和最小值的標註線

        LimitLine ll1 = new LimitLine(100f, "最大值");

        ll1.setLineWidth(4f);

//        ll1.enableDashedLine(10f, 10f, 0f);//設定為虛線。

        ll1.setLabelPosition(LimitLabelPosition.POS_LEFT);

        ll1.setTextSize(10f);

 

        LimitLine ll2 = new LimitLine(10f, "最小值");

        ll2.setLineWidth(4f);

//        ll2.enableDashedLine(10f, 10f, 0f);

        ll2.setLabelPosition(LimitLabelPosition.POS_LEFT);

        ll2.setTextSize(10f);

        

 

        //X軸樣式。

        XAxis xAxis = lineChart.getXAxis();

        xAxis.setPosition(XAxisPosition.BOTTOM);

        xAxis.setTypeface(mTf);

        xAxis.setDrawGridLines(false);

        xAxis.setDrawAxisLine(true);

        

        //Y軸樣式。

        YAxis leftAxis = lineChart.getAxisLeft();

        leftAxis.setTypeface(mTf);

        leftAxis.setLabelCount(10);

        leftAxis.addLimitLine(ll1);

        leftAxis.addLimitLine(ll2);

 

        //設定圖例樣式。

        Legend mLegend = lineChart.getLegend(); // 設定比例表徵圖示，就是那個一組y的value的    

        mLegend.setForm(LegendForm.CIRCLE);// 樣式    

        mLegend.setFormSize(6f);// 字型    

        mLegend.setTextColor(Color.BLACK);// 顏色    

        mLegend.setTypeface(mTf);// 字型    

 

        //圖表動畫。

        lineChart.animateX(2000); // 立即執行的動畫,x軸 

        lineChart.animateY(1000); // 立即執行的動畫,y軸  

 

3.組建圖表的資料

        

        // x軸顯示的資料，這裡預設使用數字下標顯示  

        ArrayList<String> xValues = new ArrayList<String>();    

        for (int i = 0; i < count; i++) {    

            xValues.add("" + i);    

        }    

    

        // y軸的資料    

        ArrayList<Entry> yValues = new ArrayList<Entry>();    

        for (int i = 0; i < count; i++) {    

            float value = (float) (Math.random() * range) + 3;    

            yValues.add(new Entry(value, i));    

        }    

 

        // create a dataset and give it a type    

        // y軸的資料集合    

        LineDataSet lineDataSet = new LineDataSet(yValues, "測試折線圖" /*顯示在比例圖上*/);    

        // mLineDataSet.setFillAlpha(110);    

        // mLineDataSet.setFillColor(Color.RED);    

    

        //用y軸的集合來設定資料線和資料點的樣式  

        lineDataSet.setLineWidth(1.75f); // 線寬    

        lineDataSet.setCircleSize(4.5f);// 顯示的圓形大小    

        lineDataSet.setColor(color);// 線的顏色    

        lineDataSet.setCircleColor(color);// 圓形的顏色    

        lineDataSet.setHighLightColor(Color.rgb(244, 117, 117)); // 高亮的線的顏色    

 

        // create a data object with the datasets    

        LineData lineData = new LineData(xValues, lineDataSet);//產生資料

 

============================================================

 

        //將資料集合加入到ArrayList中。產生的LineData可以在一個圖表上產生多條資料線。

        ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();    

        lineDataSets.add(lineDataSet); //添加DataSet

        LineData lineData = new LineData(xValues, lineDataSets);  //使用ArrayList設定產生資料。

==============================================================

 

4.將資料繫結到圖表。

    lineChart.setData(lineData); // 設定資料  

 

參考：http://blog.csdn.net/shineflowers/article/details/44704723

MPAndroidChart開源圖表庫之折線圖