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

最新推荐文章于 2024-08-16 09:13:39 发布

mo_weifeng

最新推荐文章于 2024-08-16 09:13:39 发布

阅读量817

点赞数

分类专栏： Android基础

本文链接：https://blog.csdn.net/iromkoear/article/details/114689351

版权

Android基础专栏收录该内容

89 篇文章 2 订阅

订阅专栏

在这里插入图片描述
下载官方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);
        }

    }
}

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" />

但是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" />

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

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;
    }