MPAndroidChart3.0使用详解(二)----柱状图、折线图、组合图的使用
来源:互联网 发布:魔兽数据库2.43 编辑:程序博客网 时间:2024/06/05 19:48
上篇主要讲到了MPAndroidChart这个开源库的一些基本特性和基础设置,现在来讲下我们经常要用到的柱状图(直方图)、折线图和组合图的使用。
柱状图
再讲之前,先看效果图。
第一个是单个柱状图,第二个是组合(group)的柱状图
使用
1、首先先创建BarChart对象,并初始化,进行些基础设置
2、为BarChart添加对象,利用BarEntry添加x轴,y轴的数据
3、初始化BarDataSet对象,为BarDataSet添加BarEntry对象
4、初始化BarData对象,为BarData添加BarDataSet
5、为BarChart添加BarData,即BarChart.setData(barData)
这样就完成了柱状图的绘制。
一些BarChart属性的设置
setDrawValueAboveBar(boolean enabled):// 如果设置为true,在条形图上方显示值。如果为false,会显示在顶部下方。setDrawBarShadow(boolean enabled):// 是否显示阴影。启动它会降低约40%的性能setDrawValuesForWholeStack(boolean enabled):// 如果设置为true,堆叠条形的所有值会分别绘制,而不仅仅是他们所有的顶部总和。setDrawHighlightArrow(boolean enabled):// 是否强调绘制箭头
这里已经封装好了一个BarChartManager,使用的时候只用添加数据即可。代码如下:
import android.graphics.Color;import com.github.mikephil.charting.animation.Easing;import com.github.mikephil.charting.charts.BarChart;import com.github.mikephil.charting.components.Description;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.components.LimitLine;import com.github.mikephil.charting.components.XAxis;import com.github.mikephil.charting.components.YAxis;import com.github.mikephil.charting.data.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;import java.util.ArrayList;import java.util.List;/** * Descriptions:柱状图管理类 */public class BarChartManager { private BarChart mBarChart; private YAxis leftAxis; private YAxis rightAxis; private XAxis xAxis; //颜色集合 List<Integer> colors = new ArrayList<>(); public BarChartManager(BarChart barChart) { this.mBarChart = barChart; leftAxis = mBarChart.getAxisLeft(); rightAxis = mBarChart.getAxisRight(); xAxis = mBarChart.getXAxis(); colors.add(Color.GREEN); colors.add(Color.BLUE); colors.add(Color.RED); colors.add(Color.CYAN); initBarChart(); } /** * 初始化LineChart */ private void initBarChart() { //背景颜色 mBarChart.setBackgroundColor(Color.WHITE); //网格 mBarChart.setDrawGridBackground(false); //背景阴影 mBarChart.setDrawBarShadow(false); mBarChart.setHighlightFullBarEnabled(false); //显示边界 mBarChart.setDrawBorders(false); //设置动画效果 mBarChart.animateY(1000, Easing.EasingOption.Linear); mBarChart.animateX(1000, Easing.EasingOption.Linear); //图表的描述 mBarChart.getDescription().setText(""); //折线图例 标签 设置 Legend legend = mBarChart.getLegend(); legend.setForm(Legend.LegendForm.SQUARE);//图示 标签的形状。 正方形 legend.setTextSize(11f); //显示位置 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); legend.setDrawInside(false); //XY轴的设置 //X轴设置显示位置在底部 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setGranularity(1f);//设置最小的区间,避免标签的迅速增多 xAxis.setDrawGridLines(false);//设置竖状的线是否显示 xAxis.setCenterAxisLabels(true);//设置标签居中 // xAxis.setSpaceMax(10); // xAxis.setValueFormatter(); leftAxis.setDrawGridLines(true);//设置横状的线是否显示 leftAxis.enableGridDashedLine(6f, 3f, 0);//虚线 leftAxis.setAxisLineWidth(1f); leftAxis.setEnabled(true); leftAxis.setGridColor(0xacb3e5fc); // leftAxis.setTextColor(0xb3e5fc);//设置左边Y轴文字的颜色 // leftAxis.setAxisLineColor(0xb3e5fc);//设置左边Y轴的颜色 // rightAxis.setDrawGridLines(false);//设置横状的线是否显示 rightAxis.setEnabled(false);//隐藏右边轴和数字 //保证Y轴从0开始,不然会上移一点 leftAxis.setAxisMinimum(0f); rightAxis.setAxisMinimum(0f); mBarChart.setDoubleTapToZoomEnabled(false); // 设置为false以禁止通过在其上双击缩放图表。 // mBarChart.setBorderWidth(15);//设置边界宽度 } /** * 展示柱状图(一条) * * @param xAxisValues * @param yAxisValues * @param label * @param color */ public void showBarChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) { ArrayList<BarEntry> entries = new ArrayList<>(); for (int i = 0; i < xAxisValues.size(); i++) { entries.add(new BarEntry(xAxisValues.get(i), yAxisValues.get(i))); } // 每一个BarDataSet代表一类柱状图 BarDataSet barDataSet = new BarDataSet(entries, label); barDataSet.setColor(color); barDataSet.setValueTextSize(9f); barDataSet.setFormLineWidth(1f); barDataSet.setFormSize(15.f); ArrayList<IBarDataSet> dataSets = new ArrayList<>(); dataSets.add(barDataSet); BarData data = new BarData(dataSets); //设置X轴的刻度数 xAxis.setLabelCount(xAxisValues.size()-1 , false); mBarChart.setData(data); } /** * 展示柱状图(多条) * * @param xAxisValues * @param yAxisValues * @param labels * @param colours */ public void showBarChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) { BarData data = new BarData(); // xAxis.setValueFormatter(new StringAxisValueFormatter(xAxisValues)); for (int i = 0; i < yAxisValues.size(); i++) { ArrayList<BarEntry> entries = new ArrayList<>(); for (int j = 0; j < yAxisValues.get(i).size(); j++) { entries.add(new BarEntry(xAxisValues.get(i), yAxisValues.get(i).get(j))); } BarDataSet barDataSet = new BarDataSet(entries, labels.get(i)); barDataSet.setColor(colours.get(i)); barDataSet.setValueTextColor(colours.get(i)); barDataSet.setValueTextSize(10f); barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT); data.addDataSet(barDataSet); } int amount = yAxisValues.size(); float groupSpace = 0.12f; //柱状图组之间的间距 float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet // (0.2 + 0.02) * 4 + 0.12 = 1.00 -> 组成1个"group"的宽度 xAxis.setLabelCount(xAxisValues.size() - 1, false); data.setBarWidth(barWidth); data.groupBars(0, groupSpace, barSpace); mBarChart.setData(data); } protected void showBarChart(List<String> xValues, List<List<Float>> yValuesList,List<String> labels){ mBarChart.getXAxis().setValueFormatter(new StringAxisValueFormatter(xValues)); BarData data = new BarData(); for (int i = 0; i < yValuesList.size(); i++) { ArrayList<BarEntry> entries = new ArrayList<>(); for (int j = 0; j < yValuesList.get(i).size(); j++) { entries.add(new BarEntry(i, yValuesList.get(i).get(j))); } // y轴的数据集合 BarDataSet barDataSet = new BarDataSet(entries, labels.get(i)); barDataSet.setColor(colors.get(i)); barDataSet.setValueTextColor(colors.get(i)); barDataSet.setValueTextSize(10f); data.addDataSet(barDataSet); } int amount = yValuesList.size(); float groupSpace = 0.12f; //柱状图组之间的间距 float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet // (0.2 + 0.02) * 4 + 0.12 = 1.00 -> interval per "group" mBarChart.getXAxis().setLabelCount(xValues.size()-1, false); data.setBarWidth(barWidth); xAxis.setAxisMaximum(xValues.size()); xAxis.setAxisMinimum(0); data.groupBars(0, groupSpace, barSpace); mBarChart.setData(data); } protected BarData getBarData(List<String> xValues, List<List<Float>> yValuesList) { mBarChart.getXAxis().setValueFormatter(new StringAxisValueFormatter(xValues)); BarData data = new BarData(); for (int i = 0; i < yValuesList.size(); i++) { ArrayList<BarEntry> entries = new ArrayList<>(); for (int j = 0; j < yValuesList.get(i).size(); j++) { entries.add(new BarEntry(i, yValuesList.get(i).get(j))); } // y轴的数据集合 BarDataSet barDataSet = new BarDataSet(entries, xValues.get(i)); barDataSet.setColor(colors.get(i)); barDataSet.setValueTextColor(colors.get(i)); barDataSet.setValueTextSize(10f); data.addDataSet(barDataSet); } int amount = yValuesList.size(); float groupSpace = 0.12f; //柱状图组之间的间距 float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet // (0.2 + 0.02) * 4 + 0.08 = 1.00 -> interval per "group" mBarChart.getXAxis().setLabelCount(xValues.size()-1, false); data.setBarWidth(barWidth); data.groupBars(0, groupSpace, barSpace); return data; } /** * 设置Y轴值 * * @param max * @param min * @param labelCount */ public void setYAxis(float max, float min, int labelCount) { if (max < min) { return; } leftAxis.setAxisMaximum(max); leftAxis.setAxisMinimum(min); leftAxis.setLabelCount(labelCount, false); rightAxis.setAxisMaximum(max); rightAxis.setAxisMinimum(min); rightAxis.setLabelCount(labelCount, false); mBarChart.invalidate(); } /** * 设置X轴的值 * * @param max * @param min * @param labelCount */ public void setXAxis(float max, float min, int labelCount) { xAxis.setAxisMaximum(max); xAxis.setAxisMinimum(min); xAxis.setLabelCount(labelCount, false); mBarChart.invalidate(); } /** * 设置高限制线 * * @param high * @param name */ public void setHightLimitLine(float high, String name, int color) { if (name == null) { name = "高限制线"; } LimitLine hightLimit = new LimitLine(high, name); hightLimit.setLineWidth(4f); hightLimit.setTextSize(10f); hightLimit.setLineColor(color); hightLimit.setTextColor(color); leftAxis.addLimitLine(hightLimit); mBarChart.invalidate(); } /** * 设置低限制线 * * @param low * @param name */ public void setLowLimitLine(int low, String name) { if (name == null) { name = "低限制线"; } LimitLine hightLimit = new LimitLine(low, name); hightLimit.setLineWidth(4f); hightLimit.setTextSize(10f); leftAxis.addLimitLine(hightLimit); mBarChart.invalidate(); } /** * 设置描述信息 * * @param str */ public void setDescription(String str) { Description description = new Description(); description.setText(str); mBarChart.setDescription(description); mBarChart.invalidate(); }}
自定义的X轴数据转换类
import com.github.mikephil.charting.components.AxisBase;import com.github.mikephil.charting.formatter.IAxisValueFormatter;import java.util.List;/* * Description: x轴数据转换类 */public class StringAxisValueFormatter implements IAxisValueFormatter { private List<String> xValues; public StringAxisValueFormatter(List<String> xValues) { this.xValues = xValues; } @Override public String getFormattedValue(float v, AxisBase axisBase) { try{ if (v < 0 || v > (xValues.size() - 1)){//使得两侧柱子完全显示 return ""; } return xValues.get((int)v); }catch (Exception e){ return ""; } }}
Activity使用的时候:
private void testBarChart() { BarChartManager barChartManager1 = new BarChartManager(barChart1); BarChartManager barChartManager2 = new BarChartManager(barChart2); //设置x轴的数据 ArrayList<String> xValues0 = new ArrayList<>(); xValues0.add("早晨"); xValues0.add("上午"); xValues0.add("中午"); xValues0.add("下午"); xValues0.add("晚上"); //设置x轴的数据 ArrayList<Float> xValues = new ArrayList<>(); for (int i = 1; i < 6; i++) { xValues.add((float) i); } //设置y轴的数据() List<List<Float>> yValues = new ArrayList<>(); for (int i = 0; i < 4; i++) { List<Float> yValue = new ArrayList<>(); for (int j = 0; j < 5; j++) { yValue.add((float) (Math.random() * 8)+2); } yValues.add(yValue); } //颜色集合 List<Integer> colors = new ArrayList<>(); colors.add(Color.GREEN); colors.add(Color.BLUE); colors.add(Color.RED); colors.add(Color.CYAN); //线的名字集合 List<String> names = new ArrayList<>(); names.add("柱状一"); names.add("柱状二"); names.add("柱状三"); names.add("柱状四"); //创建多条柱状的图表 barChartManager1.showBarChart(xValues, yValues.get(0), names.get(1), colors.get(3)); barChartManager2.showBarChart(xValues0, yValues,names); }
折线图
效果图如下:
使用
1、初始化LineChart对象,设置基础属性
2、初始化Entry对象,添加x轴和y轴数据
3、初始化LineDataSet对象,为其添加Entry
4、初始化LineData对象,为其添加LineDataSet对象
5、设置数据,显示图表LineChart.setData(lineData)
一样的,这里也封装了一个折线图管理类LineChartManager,代码如下:
import com.github.mikephil.charting.animation.Easing;import com.github.mikephil.charting.charts.LineChart;import com.github.mikephil.charting.components.Description;import com.github.mikephil.charting.components.Legend;import com.github.mikephil.charting.components.LimitLine;import com.github.mikephil.charting.components.XAxis;import com.github.mikephil.charting.components.YAxis;import com.github.mikephil.charting.data.Entry;import com.github.mikephil.charting.data.LineData;import com.github.mikephil.charting.data.LineDataSet;import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;import java.util.ArrayList;import java.util.List;/** * Descriptions: 折线图管理类 */public class LineChartManager { private LineChart lineChart; private YAxis leftAxis; //左边Y轴 private YAxis rightAxis; //右边Y轴 private XAxis xAxis; //X轴 public LineChartManager(LineChart mLineChart) { this.lineChart = mLineChart; leftAxis = lineChart.getAxisLeft(); rightAxis = lineChart.getAxisRight(); xAxis = lineChart.getXAxis(); initLineChart(); } /** * 初始化LineChart */ private void initLineChart() { lineChart.setDrawGridBackground(false); //显示边界 lineChart.setDrawBorders(false); //设置动画效果 lineChart.animateY(1000, Easing.EasingOption.Linear); lineChart.animateX(1000, Easing.EasingOption.Linear); //折线图例 标签 设置 Legend legend = lineChart.getLegend(); legend.setForm(Legend.LegendForm.LINE); legend.setTextSize(11f); //显示位置 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); legend.setDrawInside(false); //XY轴的设置 //X轴设置显示位置在底部 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setAxisMinimum(0f); xAxis.setGranularity(1f); //保证Y轴从0开始,不然会上移一点 leftAxis.setAxisMinimum(0f); rightAxis.setAxisMinimum(0f); rightAxis.setEnabled(false);// xAxis.setDrawGridLines(false);//不绘制x轴网线// leftAxis.setDrawGridLines(false);//不绘制Y周网线 } /** * 初始化曲线 每一个LineDataSet代表一条线 * * @param lineDataSet * @param color * @param mode 折线图是否填充 */ private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) { lineDataSet.setColor(color); lineDataSet.setCircleColor(color); lineDataSet.setLineWidth(1f); lineDataSet.setCircleRadius(3f); //设置曲线值的圆点是实心还是空心 lineDataSet.setDrawCircleHole(true); lineDataSet.setValueTextSize(9f); //设置折线图填充 lineDataSet.setDrawFilled(mode);//填充曲线下方的区域 lineDataSet.setFormLineWidth(1f); lineDataSet.setFormSize(15.f); //线模式为圆滑曲线(默认折线) lineDataSet.setMode(LineDataSet.Mode.LINEAR); } /** * 展示折线图(一条) * * @param xAxisValues * @param yAxisValues * @param label * @param color */ public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) { ArrayList<Entry> entries = new ArrayList<>(); for (int i = 0; i < xAxisValues.size(); i++) { entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i))); } // 每一个LineDataSet代表一条线 LineDataSet lineDataSet = new LineDataSet(entries, label); //线模式为圆滑曲线(默认折线) lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); //设置圆心半径 lineDataSet.setCircleRadius(3f); //设置曲线值的圆点是实心还是空心 lineDataSet.setDrawCircleHole(false); initLineDataSet(lineDataSet, color, false); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add(lineDataSet); LineData data = new LineData(dataSets); //设置X轴的刻度数 xAxis.setLabelCount(xAxisValues.size()); lineChart.setData(data); } public void showLineChart(List<String> xValues,List<Float> yValues,int color){ ArrayList<Entry> entries = new ArrayList<>(); xAxis.setValueFormatter(new StringAxisValueFormatter(xValues)); for (int i = 0; i < xValues.size(); i++) { entries.add(new Entry( i, yValues.get(i))); } // 每一个LineDataSet代表一条线 LineDataSet lineDataSet = new LineDataSet(entries, "折线test"); initLineDataSet(lineDataSet, color, false); ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add(lineDataSet); LineData data = new LineData(dataSets); //设置X轴的刻度数 xAxis.setLabelCount(xValues.size()); lineChart.setData(data); } /** * 展示线性图(多条) * * @param xAxisValues * @param yAxisValues 多条曲线Y轴数据集合的集合 * @param labels * @param colors */ public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colors) { ArrayList<ILineDataSet> dataSets = new ArrayList<>(); for (int i = 0; i < yAxisValues.size(); i++) { ArrayList<Entry> entries = new ArrayList<>(); for (int j = 0; j < yAxisValues.get(i).size(); j++) {// if (j >= xAxisValues.size()) {// j = xAxisValues.size() - 1;// } entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j))); } LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i)); initLineDataSet(lineDataSet, colors.get(i), false); dataSets.add(lineDataSet); } LineData data = new LineData(dataSets); xAxis.setLabelCount(xAxisValues.size(), true); lineChart.setData(data); } /** * 设置Y轴值 * * @param max * @param min * @param labelCount */ public void setYAxis(float max, float min, int labelCount) { if (max < min) { return; } leftAxis.setAxisMaximum(max); leftAxis.setAxisMinimum(min); leftAxis.setLabelCount(labelCount, false); rightAxis.setAxisMaximum(max); rightAxis.setAxisMinimum(min); rightAxis.setLabelCount(labelCount, false); lineChart.invalidate(); } /** * 设置X轴的值 * * @param max * @param min * @param labelCount */ public void setXAxis(float max, float min, int labelCount) { xAxis.setAxisMaximum(max); xAxis.setAxisMinimum(min); xAxis.setLabelCount(labelCount, true); lineChart.invalidate(); } /** * 设置高限制线 * * @param high * @param name */ public void setHightLimitLine(float high, String name, int color) { if (name == null) { name = "高限制线"; } LimitLine hightLimit = new LimitLine(high, name); hightLimit.setLineWidth(2f); hightLimit.setTextSize(10f); hightLimit.setLineColor(color); hightLimit.setTextColor(color); leftAxis.addLimitLine(hightLimit); lineChart.invalidate(); } /** * 设置低限制线 * * @param low * @param name */ public void setLowLimitLine(int low, String name) { if (name == null) { name = "低限制线"; } LimitLine hightLimit = new LimitLine(low, name); hightLimit.setLineWidth(4f); hightLimit.setTextSize(10f); leftAxis.addLimitLine(hightLimit); lineChart.invalidate(); } /** * 设置描述信息 * * @param str */ public void setDescription(String str) { Description description = new Description(); description.setText(str); lineChart.setDescription(description); lineChart.invalidate(); }}
x轴数据转换类代码就不贴了,柱状图上面有。
Activity中使用
/** * 测试折线图 */ private void testLineChart() { LineChartManager lineChartManager1 = new LineChartManager(lineChart1); LineChartManager lineChartManager2 = new LineChartManager(lineChart2); //设置x轴的数据 ArrayList<Float> xValues = new ArrayList<>(); for (int i = 0; i < 10; i++) {//10组数据 xValues.add((float) i); } //设置y轴的数据() List<List<Float>> yValues = new ArrayList<>(); for (int i = 0; i < 4; i++) { List<Float> yValue = new ArrayList<>(); for (int j = 0; j < 10; j++) { yValue.add((float) (Math.random() * 80)); } yValues.add(yValue); } //颜色集合 List<Integer> colors = new ArrayList<>(); colors.add(Color.GREEN); colors.add(Color.BLUE); colors.add(Color.RED); colors.add(Color.CYAN); //线的名字集合 List<String> names = new ArrayList<>(); names.add("折线一"); names.add("折线二"); names.add("折线三"); names.add("折线四"); //创建单条折线的图表 lineChartManager1.showLineChart(xValues, yValues.get(0), names.get(0), colors.get(0)); lineChartManager1.setYAxis(100, 0, 11); lineChartManager1.setDescription("温度"); // lineChartManager1.setXAxis(10,0,xValues.size()); lineChartManager1.setHightLimitLine(70,"高温报警",Color.RED); //创建多条折线的图表 // lineChartManager2.showLineChart(xValues, yValues, names, colors); // lineChartManager2.setYAxis(100, 0, 11); lineChartManager2.showLineChart(xValues, yValues, names, colors); lineChartManager2.setYAxis(100, 0, 11); lineChartManager2.setDescription("温度"); }
组合图
组合图CombinedChart。这里主要是折线图和柱状图的组合形式
效果图如下:
xml文件
<com.github.mikephil.charting.charts.CombinedChart android:id="@+id/combine_chart2" android:layout_width="match_parent" android:layout_height="250dp"/>
这里也封装了一个CombinedChart工具类,CombinedChartManager代码如下:
public class CombinedChartManager { private CombinedChart mCombinedChart; private YAxis leftAxis; private YAxis rightAxis; private XAxis xAxis; public CombinedChartManager(CombinedChart combinedChart) { this.mCombinedChart = combinedChart; leftAxis = mCombinedChart.getAxisLeft(); rightAxis = mCombinedChart.getAxisRight(); xAxis = mCombinedChart.getXAxis(); } /** * 初始化Chart */ private void initChart() { //不显示描述内容 mCombinedChart.getDescription().setEnabled(false); mCombinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{ CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.LINE }); mCombinedChart.setBackgroundColor(Color.WHITE); mCombinedChart.setDrawGridBackground(false); mCombinedChart.setDrawBarShadow(false); mCombinedChart.setHighlightFullBarEnabled(false); //显示边界 mCombinedChart.setDrawBorders(true); //图例说明 Legend legend = mCombinedChart.getLegend(); legend.setWordWrapEnabled(true); legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); legend.setDrawInside(false); //Y轴设置 rightAxis.setDrawGridLines(false); rightAxis.setAxisMinimum(0f); leftAxis.setDrawGridLines(false); leftAxis.setAxisMinimum(0f); mCombinedChart.animateX(2000); // 立即执行的动画,x轴 } /** * 设置X轴坐标值 * * @param xAxisValues x轴坐标集合 */ public void setXAxis(final List<String> xAxisValues) { //设置X轴在底部 XAxis xAxis = mCombinedChart.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setGranularity(1f); xAxis.setLabelCount(xAxisValues.size() - 1,false); xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return xAxisValues.get((int) value % xAxisValues.size()); } }); mCombinedChart.invalidate(); } /** * 得到折线图(一条) * * @param lineChartY 折线Y轴值 * @param lineName 折线图名字 * @param lineColor 折线颜色 * @return */ private LineData getLineData(List<Float> lineChartY, String lineName, int lineColor) { LineData lineData = new LineData(); ArrayList<Entry> yValue = new ArrayList<>(); for (int i = 0; i < lineChartY.size(); i++) { yValue.add(new Entry(i, lineChartY.get(i))); } LineDataSet dataSet = new LineDataSet(yValue, lineName); dataSet.setColor(lineColor); dataSet.setCircleColor(lineColor); dataSet.setValueTextColor(lineColor); dataSet.setCircleSize(1); //显示值 dataSet.setDrawValues(true); dataSet.setValueTextSize(10f); dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); dataSet.setAxisDependency(YAxis.AxisDependency.LEFT); lineData.addDataSet(dataSet); return lineData; } /** * 得到折线图(多条) * * @param lineChartYs 折线Y轴值 * @param lineNames 折线图名字 * @param lineColors 折线颜色 * @return */ private LineData getLineData(List<List<Float>> lineChartYs, List<String> lineNames, List<Integer> lineColors) { LineData lineData = new LineData(); for (int i = 0; i < lineChartYs.size(); i++) { ArrayList<Entry> yValues = new ArrayList<>(); for (int j = 0; j < lineChartYs.get(i).size(); j++) { yValues.add(new Entry(j, lineChartYs.get(i).get(j))); } LineDataSet dataSet = new LineDataSet(yValues, lineNames.get(i)); dataSet.setColor(lineColors.get(i)); dataSet.setCircleColor(lineColors.get(i)); dataSet.setValueTextColor(lineColors.get(i)); dataSet.setCircleSize(1); dataSet.setDrawValues(true); dataSet.setValueTextSize(10f); dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); dataSet.setAxisDependency(YAxis.AxisDependency.LEFT); lineData.addDataSet(dataSet); } return lineData; } /** * 得到柱状图 * * @param barChartY Y轴值 * @param barName 柱状图名字 * @param barColor 柱状图颜色 * @return */ private BarData getBarData(List<Float> barChartY, String barName, int barColor) { BarData barData = new BarData(); ArrayList<BarEntry> yValues = new ArrayList<>(); for (int i = 0; i < barChartY.size(); i++) { yValues.add(new BarEntry(i, barChartY.get(i))); } BarDataSet barDataSet = new BarDataSet(yValues, barName); barDataSet.setColor(barColor); barDataSet.setValueTextSize(10f); barDataSet.setValueTextColor(barColor); barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); barData.addDataSet(barDataSet); //以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定 xAxis.setAxisMinimum(-0.5f); xAxis.setAxisMaximum((float) (barChartY.size()- 0.5)); return barData; } /** * 得到柱状图(多条) * * @param barChartYs Y轴值 * @param barNames 柱状图名字 * @param barColors 柱状图颜色 * @return */ private BarData getBarData(List<List<Float>> barChartYs, List<String> barNames, List<Integer> barColors) { List<IBarDataSet> lists = new ArrayList<>(); for (int i = 0; i < barChartYs.size(); i++) { ArrayList<BarEntry> entries = new ArrayList<>(); for (int j = 0; j < barChartYs.get(i).size(); j++) { entries.add(new BarEntry(j, barChartYs.get(i).get(j))); } BarDataSet barDataSet = new BarDataSet(entries, barNames.get(i)); barDataSet.setColor(barColors.get(i)); barDataSet.setValueTextColor(barColors.get(i)); barDataSet.setValueTextSize(10f); barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); lists.add(barDataSet); } BarData barData = new BarData(lists); int amount = barChartYs.size(); //需要显示柱状图的类别 数量 float groupSpace = 0.12f; //柱状图组之间的间距 float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet // (0.2 + 0.02) * 4 + 0.12 = 1.00 即100% 按照百分百布局 //柱状图宽度 barData.setBarWidth(barWidth); //(起始点、柱状图组间距、柱状图之间间距) barData.groupBars(0, groupSpace, barSpace); return barData; } /** * 显示混合图(柱状图+折线图) * * @param xAxisValues X轴坐标 * @param barChartY 柱状图Y轴值 * @param lineChartY 折线图Y轴值 * @param barName 柱状图名字 * @param lineName 折线图名字 * @param barColor 柱状图颜色 * @param lineColor 折线图颜色 */ public void showCombinedChart( List<String> xAxisValues, List<Float> barChartY, List<Float> lineChartY , String barName, String lineName, int barColor, int lineColor) { initChart(); setXAxis(xAxisValues); CombinedData combinedData = new CombinedData(); combinedData.setData(getBarData(barChartY, barName, barColor)); combinedData.setData(getLineData(lineChartY, lineName, lineColor)); mCombinedChart.setData(combinedData); mCombinedChart.invalidate(); } /** * 显示混合图(柱状图+折线图) * * @param xAxisValues X轴坐标 * @param barChartYs 柱状图Y轴值 * @param lineChartYs 折线图Y轴值 * @param barNames 柱状图名字 * @param lineNames 折线图名字 * @param barColors 柱状图颜色 * @param lineColors 折线图颜色 */ public void showCombinedChart( List<String> xAxisValues, List<List<Float>> barChartYs, List<List<Float>> lineChartYs, List<String> barNames, List<String> lineNames, List<Integer> barColors, List<Integer> lineColors) { initChart(); setXAxis(xAxisValues); CombinedData combinedData = new CombinedData(); combinedData.setData(getBarData(barChartYs, barNames, barColors)); combinedData.setData(getLineData(lineChartYs, lineNames, lineColors)); mCombinedChart.setData(combinedData); mCombinedChart.invalidate(); }}
但是用到组合图的时候,遇到一个问题,就是一个组合图中柱状图可以设置group,但是对应的折线图只有一个值,这个问题github上也有人发过相应的issues,作者PhilJay本人说在3.0的版本中已经解决,但是也没看到例子。现在我采用的是一个比较蠢的方法,用几个第一个图的效果“拼”出所需的效果,假如你有其他更好的方法,或者如果有人会用所说的新属性的话,烦请告诉我一声,不胜感激。
参考资料
1、android开源图表库MPAndroidChart文档翻译(上)
2、Android图表控件MPAndroidChart——曲线图+柱状图 CombinedChart的使用
3、Android之MPAndroidChart库使用说明(柱状图、折线图、饼图和组合图.)
4、MPAndroidChart 教程:开始 Getting Started(一)
- MPAndroidChart3.0使用详解(二)----柱状图、折线图、组合图的使用
- MPAndroidChart3.0使用详解(一)----基本属性设置
- 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 MFC使用TeeChart绘图控件之二:绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
- flex柱状图和折线图的混合图使用
- ECHARTS的基本使用:柱状图、折线图、饼图等
- Echarts柱状图与折线图的基本使用
- idea配置jvm启动参数
- 选择排序与冒泡排序
- Toolbar的使用(一)
- 【JavaSE学习笔记】集合应用_Collectons工具,模拟斗地主,异常
- C语言排序之快速排序篇
- MPAndroidChart3.0使用详解(二)----柱状图、折线图、组合图的使用
- Visual studio Community 2017安装初体验
- Google算法题:最大可分子集
- 多表查询----合并查询
- cmd运行javac 报告javac不是内部或外部命令,运行java、java-version正常
- WebRTC原生开发和混合开发优缺点分析对比
- 其他三种排序:堆排序,归并排序,快速排序
- Netty之解决TCP粘包拆包(自定义协议)
- C# 调试(上) 预处理指令