使用hellochart和AAChartCore开发联合查询表

下载官方demo修改即可：https://github.com/lecho/hellocharts-android

代码：
TempoChartActivity

package lecho.lib.hellocharts.samples;

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import androidx.fragment.app.Fragment;
import lecho.lib.hellocharts.formatter.SimpleAxisValueFormatter;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;

public class TempoChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tempo_chart);
        if (savedInstanceState == null) {
            getSupportFragmentManager().beginTransaction().add(R.id.container, new PlaceholderFragment()).commit();
        }
    }

    public static class PlaceholderFragment extends Fragment {

        private LineChartView chart;
        private LineChartData data;
        private String[] date = {"3.6", "3.5", "3.6", "3.7", "3.8", "3.9", "3.10"};//X轴的标注
        private int[] score1 = {4648, 4489, 4500, 5453, 4405, 5000, 4858};//图表的数据点
        private int[] score2 = {100, 150, 140, 220, 200, 110, 210};//图表的数据点
        private float tempoRange = 350; //
        private float add = 10; //
        private int scale = 20; //
        private List<PointValue> mElectricityPointValues = new ArrayList<PointValue>();
        private List<PointValue> mCountsPointValues2 = new ArrayList<PointValue>();
        private List<AxisValue> mAxisBottomValues = new ArrayList<AxisValue>();

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_tempo_chart, container, false);
            chart = (LineChartView) rootView.findViewById(R.id.chart);
            getAxisXLables();//获取x轴的标注
            getAxisPoints();//获取坐标点
            getAxisPoints2();//获取坐标点
            generateData();
            return rootView;
        }

        /**
         * 设置X轴的显示
         */
        private void getAxisXLables() {
            for (int i = 0; i < date.length; i++) {
                mAxisBottomValues.add(new AxisValue(i).setLabel(date[i]));
            }
        }

        /**
         * 电量数据
         */
        private void getAxisPoints() {
            for (int i = 0; i < score1.length; i++) {
                mElectricityPointValues.add(new PointValue(i, score1[i] / scale));
            }
        }

        /**
         *次数数据
         */
        private void getAxisPoints2() {
            for (int i = 0; i < score2.length; i++) {
                mCountsPointValues2.add(new PointValue(i, score2[i]));
            }
        }

        private void generateData() {

            List<Line> lines = new ArrayList<Line>();

            //设置次数数据
            Line rightLine = new Line(mElectricityPointValues);
            rightLine.setColor(Color.BLUE);
            rightLine.setShape(ValueShape.CIRCLE);
            rightLine.setHasPoints(false);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）
            rightLine.setHasLabels(false);
            rightLine.setCubic(true);//曲线是否平滑，即是曲线还是折线
            rightLine.setFilled(true);//是否填充曲线的面积
            rightLine.setStrokeWidth(3);
            lines.add(rightLine);

            //设置电量数据
            Line leftLine;
            leftLine = new Line(mCountsPointValues2);
            leftLine.setShape(ValueShape.CIRCLE);
            leftLine.setHasPoints(false);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）
            leftLine.setHasLabels(false);
            leftLine.setCubic(true);//曲线是否平滑，即是曲线还是折线
            int COLOR_GREEN = Color.parseColor("#15ee15");
//            line.setColor(ChartUtils.COLOR_GREEN);
            leftLine.setColor(COLOR_GREEN);
            leftLine.setStrokeWidth(3);
            leftLine.setFilled(true);//是否填充曲线的面积
            lines.add(leftLine);

            data = new LineChartData(lines);

            //设置底部
            Axis bottomAxis = new Axis();
            bottomAxis.setName("日期");
            bottomAxis.setTextColor(Color.GRAY);
//            bottomAxis.setMaxLabelChars(7);//最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
//            bottomAxis.setFormatter(new SimpleAxisValueFormatter().setAppendedText("km".toCharArray()));
//            bottomAxis.setHasLines(false);//x 轴分割线
            bottomAxis.setValues(mAxisBottomValues);
//            bottomAxis.setHasTiltedLabels(true);//X坐标轴字体是斜的显示还是直的，true是斜的显示
            data.setAxisXBottom(bottomAxis);

            List<AxisValue> axisValues = new ArrayList<AxisValue>();
            for (float i = 0; i < tempoRange; i += add) {
                axisValues.add(new AxisValue(i).setLabel("" + (int) i * scale));
            }

            //设置左边
            Axis leftAxis = new Axis(axisValues)
//                    .setName("单位: kWh")
                    .setHasLines(true)
                    .setMaxLabelChars(5)
                    .setTextColor(Color.GRAY);
            data.setAxisYLeft(leftAxis);

            //设置右边
            Axis rightAxis = new Axis()
//                    .setName("次数")
                    .setMaxLabelChars(5).
                    setTextColor(Color.GRAY)
                    .setFormatter(new SimpleAxisValueFormatter());
            data.setAxisYRight(rightAxis);

            chart.setLineChartData(data);
            Viewport v = chart.getMaximumViewport();
            v.set(v.left, tempoRange, v.right, 0);

            chart.setMaximumViewport(v);
            chart.setCurrentViewport(v);
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

XML

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="lecho.lib.hellocharts.samples.TempoChartActivity"
    tools:ignore="MergeRootFrame" />


1
2
3
4
5
6
7
8
9

但是hellochart不支持点击查看具体数据，于是又找到一个很强大的图表控件AAChartCore，它有很多丰富的好看的demo，基本能满足大部分的需求了

github:https://github.com/AAChartModel/AAChartCore/blob/master/CHINESE-README.md

使用起来也非常简单

        <com.enneagon.aachartcore.AAChartCreator.AAChartView
            android:id="@+id/AAChartView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginBottom="100dp"
            android:layout_marginTop="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp" />
1
2
3
4
5
6
7
8

        AAOptions aaOptions = configureDoubleYAxisChartOptions(dateArray, electArray, countArray);
        aaChartView.aa_drawChartWithChartOptions(aaOptions);
1
2

private AAOptions configureDoubleYAxisChartOptions(String[] bottomArrays, Object[] leftArrays, Object[] rightArrays) {
        //去掉头顶标题
        AATitle aaTitle = new AATitle()
                .text("");

        //底部X轴
        AAXAxis bottomAxis = new AAXAxis()
                .visible(true)
                .min(0f)
                .categories(bottomArrays);

        //去掉Y轴标题
        AAStyle aaYAxisTitleStyle = new AAStyle()
                .color("#1e90ff")//Title font color
                .fontSize(50f)//Title font size
                .fontWeight(AAChartFontWeightType.Bold)//Title font weight
                .textOutline("0px 0px contrast");

        //Y轴刻度风格
        AALabels aaYAxisLabels = new AALabels()
                .enabled(true)//设置 y 轴是否显示数字
//                .format("{value:.,0f}")//让y轴的值完整显示 而不是100000显示为100k,同时单位后缀为°C
                .format("{value}")
                .style(new AAStyle()
                        .color("#999999")//字体颜色
                        .fontSize(10f)//字体大小
                        .fontWeight(AAChartFontWeightType.Thin)//字体粗细
                );

        //左边Y轴刻度样式
        AAYAxis leftAxis = new AAYAxis()
                .visible(true)
                .allowDecimals(false)//y 轴是否允许显示小数
                .max(maxElectValue)
                .labels(aaYAxisLabels)
                .title(new AATitle()
                                .text("")
//                        .style(aaYAxisTitleStyle)
                );


        //右边Y轴刻度样式
        AAYAxis rightAxis = new AAYAxis()
                .visible(true)
                .max(maxCountValue)
                .tickInterval(tickInterval)
                .labels(aaYAxisLabels)
                .title(new AATitle()
                                .text("")
//                        .style(aaYAxisTitleStyle)
                )
                .opposite(true);//将坐标轴显示在对立面


        //开启浮窗
        AATooltip aaTooltip = new AATooltip()
                .enabled(true)
                .shared(true)
                .useHTML(true)
                .headerFormat("{point.key} " + "<br>")
//                .pointFormat("<tr><td style=\\\"color: {series.color}\\\">{series.name}: </td>"
//                        + "<td style=\\\"text-align: right\\\"><b>{point.y}EUR</b></td></tr>")
//                .footerFormat("</table>")
//                .valueDecimals(2)
                ;

        AAMarker aaMarker = new AAMarker()
                .radius(0f)//曲线连接点半径，默认是4
                .symbol(AAChartSymbolType.Circle)//曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
//                .fillColor("#ffffff")//点的填充色(用来设置折线连接点的填充色)
                .lineWidth(1f)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
                .lineColor("");//外沿线的颜色(用来设置折线连接点的轮廓描边颜色，当值为空字符串时，默认取数据点或数据列的颜色)

        //左轴线的渐变颜色
        Map gradientColorDic1 = AAGradientColor.linearGradient(
                AALinearGradientDirection.ToTop,
                "#0E549F",
                "#0E549F"//颜色字符串设置支持十六进制类型和 rgba 类型
        );

        //右轴线的渐变颜色
        Map gradientColorDic2 = AAGradientColor.linearGradient(
                AALinearGradientDirection.ToTop,
                "#09C606",
                "#09C606"//颜色字符串设置支持十六进制类型和 rgba 类型
        );

        Map linearGradientColor = AAGradientColor.linearGradient(
                AALinearGradientDirection.ToBottom,
                "rgba(120,169,221,1)",//深粉色, alpha 透明度 1
                "rgba(217,228,240,0.1)"//热情的粉红, alpha 透明度 0.1
        );//颜色字符串设置支持十六进制类型和 rgba 类型

            Map linearGradientColor2 = AAGradientColor.linearGradient(
                AALinearGradientDirection.ToBottom,
                "rgba(172,234,171,1)",//深粉色, alpha 透明度 1
                "rgba(214,244,213,0.1)"//热情的粉红, alpha 透明度 0.1
        );//颜色字符串设置支持十六进制类型和 rgba 类型


        //左折线风格
        AASeriesElement element1 = new AASeriesElement()
                .name("电量")
                .type(AAChartType.Areaspline)
                .lineWidth(3f)
//                .fillOpacity(0.25f)
                //          .borderRadius(4)
//                .color(linearGradientColor)
                .marker(aaMarker)

                .color(AAColor.rgbaColor(14,84,159, 1f))//猩红色, alpha 透明度 1
                .fillColor(linearGradientColor)

                .yAxis(1)
                .data(leftArrays);


        //右折线风格
        AASeriesElement element2 = new AASeriesElement()
                .name("次数")
                .type(AAChartType.Areaspline)
                .lineWidth(3f)
//                .fillOpacity(0.25f)
                .color(AAColor.rgbaColor(9,198,6, 1f))//猩红色, alpha 透明度 1
                .fillColor(linearGradientColor2)
                .marker(aaMarker)
                .yAxis(0)
                .data(rightArrays);

        //去掉底部标题
        AALegend aaLegend = new AALegend()
                .enabled(false);

        AAOptions aaOptions = new AAOptions()

                .title(aaTitle)
                .colors(new String[]{"#0E549F", "#09C606"})
                .xAxis(bottomAxis)
                .yAxisArray(new AAYAxis[]{rightAxis, leftAxis})
                .tooltip(aaTooltip)
                .legend(aaLegend)
                .series(new AASeriesElement[]{element1, element2});

        AACrosshair aaCrosshair = new AACrosshair()
                .color(AAColor.LightGray)
                .width(1f)
                .dashStyle(AAChartLineDashStyleType.LongDashDotDot)
                ;
        AAXAxis aaXAxis =  aaOptions.xAxis;
        aaXAxis.crosshair(aaCrosshair);
        return aaOptions;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

还有一些其它的优秀图表框架：

AnyChart-Android

参考文章

• Android图表库hellocharts详解