[关闭]
@zifeng328573112 2021-03-17T11:16:24.000000Z 字数 8983 阅读 478

MPAndroidChart技术-设置数据,设置颜色(四)

一、ChartData 类

为了让大家更容易理解,这里先简单介绍下 MPAndroidChart 的数据模型 ChartData 。后面有文章再详细介绍该图标库的其它数据类型。

ChartData 类是所有数据类的基类,比如 LineDataBarData 等,它是用来为 Chart 提供数据的,通过 setData(ChartData data){...} 方法。

  1. public class LineData extends ChartData { ...

以下提到的方法是在 ChartData 类中被实现,因此可用于所有子类。

1. Styling data

  1. //LineDataSet可以看做是一条线
  2. LineDataSet dataSet = new LineDataSet(entryList, "dataLine");
  3. dataSet.setLineWidth(2.5f);
  4. dataSet.setCircleSize(4.5f);
  5. dataSet.setHighLightColor(Color.RED); // 设置点击某个点时,横竖两条线的颜色
  6. dataSet.setDrawValues(true); // 是否在点上绘制Value
  7. dataSet.setValueTextColor(Color.GREEN);
  8. dataSet.setValueTextSize(12f);
  9. allLinesList.add(dataSet);
  1. dataSet.setValueTextSize(24f);
  2. allLinesList.add(dataSet);
  3. // 设置上面左图的字体
  4. Typeface tf1 = Typeface.createFromAsset(getAssets(), "OpenSans-BoldItalic.ttf");
  5. dataSet.setValueTypeface(tf1);
  6. // 设置上面右图的字体
  7. Typeface tf2 = Typeface.createFromAsset(getAssets(), "OpenSans-LightItalic.ttf");
  8. dataSet.setValueTypeface(tf2);

2. Getters / Convenience

3. Clear

4, 选中高亮

二、设置数据

1. 概述

如果你想为图表添加数据,你可以通过下面这个方法:

  1. public void setData(ChartData data) { ... }

基类 ChartData 封装了渲染过程中所需要的图表中的所有数据和信息。 对于每种类型的图表,不同的 ChartData 子类(例如 LineData)应该被用于为图表设置数据。 在构造函数中,你可以通过 ArrayList<? extends DataSet> 作为要显示的值,一个额外 ArrayListString 用来描述 x 轴上的标签。 例如,通过 LineData 将数据添加到一个 LineChart :

  1. // this is just one of many constructors
  2. public LineData(ArrayList<String> xVals, ArrayList<LineDataSet> sets) { ... }

那么,DataSet 到底是什么和为什么你会需要它? 很简单,一个 DataSet 对象代表一组 entries(数据类型 Entry),在图表内属于一个整体。 它在图表中被设计成 逻辑上分离的不同组的值 。 每种类型的图表,通过一个不同的 DataSet 对象(如 LineDataSet)来做出特定的 style 。

2. 举个例子

你可能想用 LineChart 来 显示两个不同公司一年的季度收入 。在这种情况下,将建议创建两个不同的 LineDataSet 对象,每个包含四个值(四个季度)。 用一个 ArrayList 描述在x轴上的标签,您只需提供四个 String : “第一季度”,“第二季度”,“第三季度”,“第四季度”

当然,也有可能只提供一个包含两个公司的所有8个值的 LineDataSet 对象。

那么,如何建立一个 LineDataSet 对象?

  1. // LineDataSet 类的源码
  2. public class LineDataSet extends LineRadarDataSet<Entry> {
  3. ....
  4. public LineDataSet(List<Entry> yVals, String label) {
  5. super(yVals, label);
  6. // mCircleSize = Utils.convertDpToPixel(4f);
  7. // mLineWidth = Utils.convertDpToPixel(1f);
  8. mCircleColors = new ArrayList<Integer>();
  9. // default colors
  10. // mColors.add(Color.rgb(192, 255, 140));
  11. // mColors.add(Color.rgb(255, 247, 140));
  12. mCircleColors.add(Color.rgb(140, 234, 255));
  13. }
  14. ....
  15. }

在构造函数中,很明显 LineDataSet 需要一个 EntryArrayList 参数,和一个 String 参数作为 图例 (Legend)的 label 来描述 LineDataSet 。 此外, this label can be used to find the LineDataSet amongst other LineDataSet objects in the LineData object.

Entry 类型的 ArrayList 封装了图表所有的值。 Entry 相当一个容器,用来封装并保存“一对值”,and it’s position on the x-axis ( the index inside the ArrayList of String of the LineData object the value is mapped to ) :

  1. public Entry(float val, int xIndex) { ... }

3. 还是用之前的例子

以前面提到的(这两家公司一年的季度营收)为例:

0) 总的数据包含和操作类似:

  1. // 假设是为 LineChart 设置数据,数据操作顺序大概如下:
  2. new Entry(float val, int xIndex);
  3. new ArrayList<Entry>();
  4. new LineDataSet(ArrayList<Entry> , "label");
  5. new ArrayList<LineDataSet>();
  6. new LineData(List<String> xVals, List<LineDataSet> dataSets));
  7. chart.setData(LineData);
  8. // 详细步骤继续往下看

1) 首先,创建类型的列表Entry ,将保留您的值:

  1. ArrayList<Entry> valsComp1 = new ArrayList<Entry>();
  2. ArrayList<Entry> valsComp2 = new ArrayList<Entry>();

2) 然后,给 lists 集合添加 Entry 对象。
确保 Entry 对象包含的 index 都是正确的 (对于x轴来说)。

  1. Entry c1e1 = new Entry(100.000f, 0); // 0 == quarter 1
  2. valsComp1.add(c1e1);
  3. Entry c1e2 = new Entry(50.000f, 1); // 1 == quarter 2 ...
  4. valsComp1.add(c1e2);
  5. // and so on ...
  6. Entry c2e1 = new Entry(120.000f, 0); // 0 == quarter 1
  7. valsComp2.add(c2e1);
  8. Entry c2e2 = new Entry(110.000f, 1); // 1 == quarter 2 ...
  9. valsComp2.add(c2e2);
  10. //...

3) 现在,有了 Entry 对象的 lists 集合,再创建 LineDataSet 对象:

  1. LineDataSet setComp1 = new LineDataSet(valsComp1, "Company 1");
  2. setComp1.setAxisDependency(AxisDependency.LEFT);
  3. LineDataSet setComp2 = new LineDataSet(valsComp2, "Company 2");
  4. setComp2.setAxisDependency(AxisDependency.LEFT);

通过调用 setAxisDependency(...) 使得 DataSet 对应指定轴,进行绘制。

4) 通过 DataSets 集合和 x-axis entries 集合,来创建我们的 ChartData 对象:

  1. // public LineData(List<String> xVals, List<LineDataSet> dataSets) {
  2. // super(xVals, dataSets);
  3. // }
  4. ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
  5. dataSets.add(setComp1);
  6. dataSets.add(setComp2);
  7. ArrayList<String> xVals = new ArrayList<String>();
  8. xVals.add("1.Q"); xVals.add("2.Q"); xVals.add("3.Q"); xVals.add("4.Q");
  9. LineData data = new LineData(xVals, dataSets);
  10. mLineChart.setData(data);
  11. mLineChart.invalidate(); // refresh

调用 invalidate() 后图表被刷新,所提供的数据重新绘制。

三、设置颜色

1. ColorTemplate 类简介

  1. public class ColorTemplate {
  2. /**
  3. * an "invalid" color that indicates that no color is set
  4. */
  5. public static final int COLOR_NONE = -1;
  6. /**
  7. * this "color" is used for the Legend creation and indicates that the next
  8. * form should be skipped
  9. */
  10. public static final int COLOR_SKIP = -2;
  11. /**
  12. * THE COLOR THEMES ARE PREDEFINED (predefined color integer arrays), FEEL
  13. * FREE TO CREATE YOUR OWN WITH AS MANY DIFFERENT COLORS AS YOU WANT
  14. */
  15. public static final int[] LIBERTY_COLORS = {
  16. Color.rgb(207, 248, 246), Color.rgb(148, 212, 212), Color.rgb(136, 180, 187),
  17. Color.rgb(118, 174, 175), Color.rgb(42, 109, 130)
  18. };
  19. public static final int[] JOYFUL_COLORS = {
  20. Color.rgb(217, 80, 138), Color.rgb(254, 149, 7), Color.rgb(254, 247, 120),
  21. Color.rgb(106, 167, 134), Color.rgb(53, 194, 209)
  22. };
  23. public static final int[] PASTEL_COLORS = {
  24. Color.rgb(64, 89, 128), Color.rgb(149, 165, 124), Color.rgb(217, 184, 162),
  25. Color.rgb(191, 134, 134), Color.rgb(179, 48, 80)
  26. };
  27. public static final int[] COLORFUL_COLORS = {
  28. Color.rgb(193, 37, 82), Color.rgb(255, 102, 0), Color.rgb(245, 199, 0),
  29. Color.rgb(106, 150, 31), Color.rgb(179, 100, 53)
  30. };
  31. public static final int[] VORDIPLOM_COLORS = {
  32. Color.rgb(192, 255, 140), Color.rgb(255, 247, 140), Color.rgb(255, 208, 140),
  33. Color.rgb(140, 234, 255), Color.rgb(255, 140, 157)
  34. };
  35. /**
  36. * Returns the Android ICS holo blue light color.
  37. *
  38. * @return
  39. */
  40. public static int getHoloBlue() {
  41. return Color.rgb(51, 181, 229);
  42. }
  43. /**
  44. * turn an array of resource-colors (contains resource-id integers) into an
  45. * array list of actual color integers
  46. *
  47. * @param r
  48. * @param colors an integer array of resource id's of colors
  49. * @return
  50. */
  51. public static List<Integer> createColors(Resources r, int[] colors) {
  52. List<Integer> result = new ArrayList<Integer>();
  53. for (int i : colors) {
  54. result.add(r.getColor(i));
  55. }
  56. return result;
  57. }
  58. /**
  59. * Turns an array of colors (integer color values) into an ArrayList of
  60. * colors.
  61. *
  62. * @param colors
  63. * @return
  64. */
  65. public static List<Integer> createColors(int[] colors) {
  66. List<Integer> result = new ArrayList<Integer>();
  67. for (int i : colors) {
  68. result.add(i);
  69. }
  70. return result;
  71. }
  72. }

2. 举例说明

还是用公司季度营收的例子,我们有两个不同的 LineDataSet 代表两家公司,为此我们现在要设置不同的颜色。

我们希望:

  1. ArrayList<LineDataSet> allLinesList = new ArrayList<LineDataSet>();
  2. //LineDataSet可以看做是一条线
  3. LineDataSet dataSet1 = new LineDataSet(entryList1, "dataLine1");
  4. LineDataSet dataSet2 = new LineDataSet(entryList2, "dataLine2");
  5. // 上面左效果图的代码
  6. // dataSet1.setColor(Color.RED);
  7. // dataSet2.setColor(Color.GREEN);
  8. // sets colors for the dataset,
  9. // resolution of the resource name to a "real" color is done internally
  10. dataSet1.setColors(new int[]{R.color.red1, R.color.red2, R.color.red3,
  11. R.color.red4}, context);
  12. dataSet2.setColors(new int[]{R.color.green1, R.color.green2, R.color.green3,
  13. R.color.green4}, context);
  14. allLinesList.add(dataSet1);
  15. allLinesList.add(dataSet2);
  16. List<String> quarterStrs = new ArrayList<String>();
  17. quarterStrs.add("第一季度");
  18. quarterStrs.add("第二季度");
  19. quarterStrs.add("第三季度");
  20. quarterStrs.add("第四季度");
  21. //LineData表示一个LineChart的所有数据(即一个LineChart中所有折线的数据)
  22. LineData mChartData = new LineData(quarterStrs, allLinesList);

除此之外,还有很多其他的方法来设置 DataSet 的颜色 。 下面是完整的文档:

3. ColorTemplate 的使用例子:

  1. LineDataSet set = new LineDataSet(...);
  2. set.setColors(ColorTemplate.VORDIPLOM_COLORS);

如果没有为 DataSet 设置颜色,则使用默认颜色。

四、 其他章节索引

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注