作者:GogHox
MPAndroidChart版本:v2.1.5
因?yàn)槭且粋€(gè)項(xiàng)目提供的jar包瘩扼,所以版本有點(diǎn)舊,現(xiàn)在最高的版本是v3.0.3.
零
記API是很low的做法睁枕,所以對(duì)著下面這幅圖再結(jié)合智能提示就很容易猜出方法名了搜变。
Screenshot_1522224398.png
一
來一個(gè)最原始的線性圖
Screenshot_1522224398.png
public class ChartActivity extends AppCompatActivity {
private LineChart lineChart;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chart);
lineChart = findViewById(R.id.lc);
ArrayList<Entry> yEntries = new ArrayList<>();
yEntries.add(new Entry(10.0f, 0));
yEntries.add(new Entry(13.0f, 1));
yEntries.add(new Entry(18.0f, 2));
yEntries.add(new Entry(8.0f, 3));
yEntries.add(new Entry(12.0f, 4));
LineDataSet lineDataSet = new LineDataSet(yEntries, "Y label");
String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
LineData lineData = new LineData(xData, lineDataSet);
lineChart.setData(lineData);
}
}
二
可能你會(huì)發(fā)現(xiàn)并不是我們想象中的那樣線性圖,那么我們需要做些改動(dòng)嘴脾,達(dá)成下面的效果:
Screenshot_1522225365.png
這樣看著就順眼多了,代碼如下:
public class ChartActivity extends AppCompatActivity {
private LineChart lineChart;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chart);
lineChart = findViewById(R.id.lc);
ArrayList<Entry> yEntries = new ArrayList<>();
yEntries.add(new Entry(10.0f, 0));
yEntries.add(new Entry(13.0f, 1));
yEntries.add(new Entry(18.0f, 2));
yEntries.add(new Entry(8.0f, 3));
yEntries.add(new Entry(12.0f, 4));
LineDataSet lineDataSet = new LineDataSet(yEntries, "Y label");
String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
LineData lineData = new LineData(xData, lineDataSet);
// 設(shè)置坐標(biāo)軸
setAxis();
lineChart.setData(lineData);
}
public void setAxis() {
// 把X軸放到下面
XAxis xAxis = lineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 不需要右面顯示Y軸
YAxis axisRight = lineChart.getAxisRight();
axisRight.setEnabled(false);
}
}
三
可能你還是會(huì)覺得不合你的心意蔬墩,那么我們接著改
Screenshot_1522373248.png
這樣你總能稍微滿意了吧~
代碼如下:
public class ChartActivity extends AppCompatActivity {
private LineChart lineChart;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_chart);
lineChart = findViewById(R.id.lc);
// y軸數(shù)據(jù)
ArrayList<Entry> yEntries1 = new ArrayList<>();
yEntries1.add(new Entry(10.0f, 0));
yEntries1.add(new Entry(13.0f, 1));
yEntries1.add(new Entry(18.0f, 2));
yEntries1.add(new Entry(8.0f, 3));
yEntries1.add(new Entry(12.0f, 4));
// 新建數(shù)據(jù)源1
LineDataSet lineDataSet1 = new LineDataSet(yEntries1, "Y label");
// 設(shè)置數(shù)據(jù)內(nèi)容的樣式
lineDataSet1.setColor(Color.GRAY); // 設(shè)置數(shù)據(jù)中線的顏色
lineDataSet1.setDrawValues(false); // 設(shè)置是否顯示數(shù)據(jù)點(diǎn)的值
lineDataSet1.setDrawCircleHole(false); // 設(shè)置數(shù)據(jù)點(diǎn)是空心還是實(shí)心译打,默認(rèn)空心
lineDataSet1.setCircleColor(Color.GREEN); // 設(shè)置數(shù)據(jù)點(diǎn)的顏色
lineDataSet1.setCircleSize(3); // 設(shè)置數(shù)據(jù)點(diǎn)的大小
lineDataSet1.setHighLightColor(Color.BLUE); // 設(shè)置點(diǎn)擊時(shí)高亮的點(diǎn)的顏色
// x軸數(shù)據(jù)
String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
LineData lineData = new LineData(xData, lineDataSet1);
// 設(shè)置坐標(biāo)軸
setAxis();
// 設(shè)置Legend
setLegend();
// 設(shè)置默認(rèn)右下角的描述
lineChart.setDescription("這是一個(gè)表格");
lineChart.setDragEnabled(false); // 不可以拖動(dòng)
lineChart.setDoubleTapToZoomEnabled(false); // 不可以雙擊縮放
lineChart.setData(lineData);
}
private void setLegend() {
Legend legend = lineChart.getLegend();
// legend.setEnabled(false); // 不需要Legend
legend.setTextColor(Color.GREEN); // 設(shè)置字的顏色
legend.setForm(Legend.LegendForm.CIRCLE); // 設(shè)置圖形為圓形
legend.setPosition(Legend.LegendPosition.ABOVE_CHART_RIGHT);
}
public void setAxis() {
// 設(shè)置x軸
XAxis xAxis = lineChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 設(shè)置x軸的位置
xAxis.setDrawGridLines(false); // 不需要圖表內(nèi)的網(wǎng)格線
// 獲取右邊的Y軸并設(shè)置
YAxis axisRight = lineChart.getAxisRight();
axisRight.setEnabled(false);
// 獲取左邊的Y軸
YAxis axisLeft = lineChart.getAxisLeft();
axisLeft.setDrawGridLines(false); // 不需要圖表內(nèi)的網(wǎng)格線
axisLeft.setLabelCount(5, true); // 設(shè)置顯示的坐標(biāo)點(diǎn)數(shù)量
}
}
四
額耗拓,你還不滿意?好吧扶平,滿足你帆离,你自己改吧~~
首位呼應(yīng),下面是我總結(jié)出來的各個(gè)部位的設(shè)置结澄。
Screenshot_1522224398.png
這是LineChart篇哥谷,寫得還不是很完整,待我用好了再來補(bǔ)充麻献,喜歡就點(diǎn)個(gè)贊哦0_0