一个酷炫的Android图表制作框架

2024-04-06 22:57:08

一、概述

最近项目中需要制作柱形图以及折线图，所以便在网上搜索了一下这方面的开源框架，最后找到了这个酷炫的框架，不仅支持各种各样的图形制作，包括折线图、柱形图、饼状图等，而且提供了丰富的API接口，等着你去自定义，只要花点心思便能 DIY 出你心仪的图表类型，使用起来也是相当的简单。

从效果图可以看到，这个框架是相当酷炫的啊，在这里附上该框架的github地址hellocharts-android，有兴趣的不妨去 star 一下

二、炫酷的柱形图

可以看到柱形图也是能玩出花样来的，绚丽的色彩，自定义的横纵轴单位以及灵活的数值变化，无疑是相当吸引眼球的，就让我们来看看怎么实现这些效果吧

1、最常见的柱形图

因为这个框架中各式各样的效果实在太多，如果全部都写的话，一篇博客实在是写不了，所以就通过实现一个常见的柱形图，以点带面，希望能对大家掌握这个框架的使用有一定的帮助。

(1) 布局的实现

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
 >

 <lecho.lib.hellocharts.view.ColumnChartView
  android:id="@+id/column_chart_cc"
  android:layout_width="match_parent"
  android:layout_height="300dp"
  android:layout_gravity="center"
  android:layout_centerInParent="true"
  />

</RelativeLayout>

可以看到直接将我们需要的控件放在我们想要的位置就行了，我们要实现的是柱形图，对应的便是ColumnChartView，这里附上一份控件对应的效果

(2) Activity中主要的代码

public class ColumnChartActivity extends AppCompatActivity {

 private ColumnChartView mColumnChartCc;

 private ColumnChartData data; // 柱形图对应的各种属性
 private boolean hasAxes = true; // 是否要添加横纵轴的属性
 private boolean hasAxesNames = true; // 是否设置横纵轴的名字
 private boolean hasLabels = false; // 是否显示柱形图的数据
 private boolean hasLabelForSelected = false; // 是否点中显示数据

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_column);
  mColumnChartCc = (ColumnChartView) findViewById(R.id.column_chart_cc);
  mColumnChartCc.setOnValueTouchListener(new ValueTouchListener());
  generateSubcolumnsData();
 }

 private void generateSubcolumnsData() {

  int numSubcolumns = 1;
  int numColumns = 4; // 表示总共有四根柱子
  List<Column> columns = new ArrayList<Column>();
  List<SubcolumnValue> values; // 柱子的属性
  List<AxisValue> axisValueList = new ArrayList<>();
  Float[] floats = {30f, 5f, 50f, 15f}; // 包含柱形图的数值的数组
  String[] selecedNames = {"选项一", "选项二", "选项三", "选项四"}; // 包含柱子的名称的数组

  for (int i = 0; i < numColumns; ++i) {

   values = new ArrayList<SubcolumnValue>();
   values.add(new SubcolumnValue(floats[i], ChartUtils.pickColor())); // 将柱子的数据以及颜色设置给 SubcolumnValue
   axisValueList.add(new AxisValue(i).setLabel(selecedNames[i]));
   Column column = new Column(values); // 设置整根柱子的属性
   column.setHasLabels(hasLabels); // 是否显示柱子的数据
   column.setHasLabelsOnlyForSelected(hasLabelForSelected); // 是否选中显示数据，一般为false
   columns.add(column);
  }

  data = new ColumnChartData(columns);
  data.setAxisXBottom(new Axis(axisValueList)); // 设置 Y 轴的属性
  data.setAxisYLeft(new Axis()); // 设置 X 轴的属性
  mColumnChartCc.setColumnChartData(data); // 将数据设置给显示柱形图的控件

 }

}

先定义一些我们后面需要用到的属性，在onCreate进行布局的初始化，可以看到我们想要实现的效果都封装在 generateSubcolumnsData 这个方法中，这个方法主要实现了这几个方面的设置

- 先设定我们总共要多少根柱子
- 通过遍历，将各根柱子的数值、颜色以及对应的名称进行设置
- 最后设置横纵轴的数值以及名称

除了以上操作之外，还有其他比较好看的效果，比如双击放大柱形图、设置网状的背景、点击柱子跳出我们想要显示的内容，这些我们都可以方便地进行定义

(3) 比较常用的API和属性

以上便是这篇博客的所有内容，最后附上柱形图的源代码HelloChartDemo，有兴趣的可以去下载，如果觉得对你有点帮助的话，就赏个star吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解Android图表 MPAndroidChart折线图

1.介绍 MPAndroidChart GitHub地址 MPAndroidChart的强大之处就不在多说了,目前最新的版本是3.0.1,在新版本中很多方法都被弃用了,这个要注意一下,在网上查到的大多数资料都是关于旧版本的,今天来实现一下折线图,把过程记录下来,分享给大家. 效果图: 2.引入开源库在项目根目录的build.gradle文件中加入如下代码 allprojects { repositories { maven { url "https://jitpack.io" } }
Android自定义控件（实现状态提示图表）

前面分析那么多系统源码了,也该暂停下来休息一下,趁昨晚闲着看见一个有意思的需求就操练一下分析源码后的实例演练--自定义控件. 这个实例很适合新手入门自定义控件.先看下效果图: 横屏模式如下: 竖屏模式如下: 看见没有,这个控件完全自定义的,连文字等都是自定义的,没有任何图片等资源,就仅仅是一个小的Java文件,这个界面只有一个控件.如下咱们看下实现代码. 实例代码如下就是整个工程的源码了. 自定义上面展示的控件AreaChartsView源码: /** * Author : yanbo * D
Android仿微信清理内存图表动画（解决surfaceView屏幕闪烁问题）demo实例详解

最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生了闪烁,而采用了双缓冲机制,即A.B两个缓冲轮流显示在画布上,同时,使用不当,同样容易产生闪烁,这是由于A.B中有一个缓冲没有改变. 在我写这个view的时候就遇到了这个问题,研究了好久终于解决. 首先说一下思路: 微信清理缓存的动画是: 一个圆环不停的转动,同时中间有文字显示-->加载完成后,出现
Android中使用achartengine生成图表的具体方法

今天在做项目的时候用到了图表功能,记录下来 achartengine是google的一个开源项目,可以在https://code.google.com/p/achartengine/ 下载技术文档,jar包以及项目源代码 demo下载:https://code.google.com/p/achartengine/downloads/list 一.饼状图新建工程,添加achartengine jar包 PieChart.java 复制代码代码如下: package com.meritit.f
MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图

MPAndroidChart开源图表库之饼状图为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,用起来非常灵活.MPAndroidChart同样拥有常用的图表类型:线型图.饼图.柱状图和散点图. mpandroidchartlibrary.jar包下载地址: https://github.com/PhilJay/MPAndroidChart/releases 下面主要实现以下饼状图: 1.从上面的地址中下载
一个酷炫的Android图表制作框架

一.概述最近项目中需要制作柱形图以及折线图,所以便在网上搜索了一下这方面的开源框架,最后找到了这个酷炫的框架,不仅支持各种各样的图形制作,包括折线图.柱形图.饼状图等,而且提供了丰富的API接口,等着你去自定义,只要花点心思便能 DIY 出你心仪的图表类型,使用起来也是相当的简单. 从效果图可以看到,这个框架是相当酷炫的啊,在这里附上该框架的github地址hellocharts-android,有兴趣的不妨去 star 一下二.炫酷的柱形图可以看到柱形图也是能玩出花样来的,绚丽的色彩,自
25个实用酷炫的Android开源UI框架

最近找了一些合适开源控件,这样在日常工作中会更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架,接下来会有其他的开源框架(如:HTTP框架.DB框架). 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:https://github.com/Yalantis/Side-Menu.Android 2.Context-Menu.Android 可以方便快速集成漂亮带有动画效果的上下文菜单,Yalantis出品. 项目地址:https:
利用JavaScript制作一个酷炫的3D图片演示

目录前言一.页面特效效果展示二.功能描述三.功能实现前言对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转三.
基于 Vue 实现一个酷炫的 menu插件

写在前面最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱:pensive:.:laughing:开个小玩耍,我们一起来探索黑魔法吧.观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解正文 1.效果演示 pic_1 pic2 pic_3 在线演示 live demo 2.使用介绍项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone
超酷炫的Android碎纸机效果推荐

在Android开发中,有时候可能会要用到碎纸机的效果,今天小编为大家整理好代码,一起来看看吧. 首先来看下效果图实例代码 xml <com.ldoublem.PaperShredderlib.PaperShredderView android:layout_width="200dp" android:id="@+id/ps_delete2" android:layout_height="220dp" paper:sherderBgCol
基于Python Dash库制作酷炫的可视化大屏

目录介绍数据大屏搭建介绍大家好,我是小F- 在数据时代,我们每个人既是数据的生产者,也是数据的使用者,然而初次获取和存储的原始数据杂乱无章.信息冗余.价值较低. 要想数据达到生动有趣.让人一目了然.豁然开朗的效果,就需要借助数据可视化. 以前给大家介绍过使用Streamlit库制作大屏,今天给大家带来一个新方法. 通过Python的Dash库,来制作一个酷炫的可视化大屏! 先来看一下整体效果,好像还不错哦. 主要使用Python的Dash库.Plotly库.Requests库. 其中R
5分钟快速实现Android爆炸破碎酷炫动画特效的示例

这个破碎动画,是一种类似小米系统删除应用时的爆炸破碎效果的动画. 效果图展示先来看下是怎样的动效,要是感觉不是理想的学习目标,就跳过,避免浪费大家的时间.�� 源码在这里:point_right: https://github.com/ReadyShowShow/explosion 一行代码即可调用该动画 new ExplosionField(this).explode(view, null)) 下面开始我们酷炫的Android动画特效正式讲解:point_down: 先来个整体结构的把握整
打造酷炫的AndroidStudio插件

前面几篇文章学习了AndroidStudio插件的基础后,这篇文章打算开发一个酷炫一点的插件.因为会用到前面的基础,所以如果没有看前面系列文章的话,请先返回.当然,如果有基础的可以忽略之.先看看本文实现的最终效果如下(好吧,很多人说看的眼花): 虽然并没有什么实际用途,但是作为学习插件开发感觉挺有意思的. 1. 基本思路基本思路可以归结如下几步: 1).通过Editor对象可以拿到封装代码编辑框的JComponent对象,即调用如下函数:JComponent component = edito
jq实现酷炫的鼠标经过图片翻滚效果

短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: 复制代码代码如下: <ul class="list"> <li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></
Python+Kepler.gl轻松制作酷炫路径动画的实现示例

1. 简介 Kepler.gl相信很多人都听说过,作为Uber几年前开源的交互式地理信息可视化工具,kepler.gl依托WebGL强大的图形渲染能力,可以在浏览器端以多种形式轻松展示大规模数据集. 更令人兴奋的是Kepler.gl在去年推出了基于Python的接口库keplergl,结合jupyter notebook/jupyter lab的相关拓展插件,使得我们可以通过编写Python程序配合Kepler.gl更灵活地制作各种可视化作品. 而随着近期keplergl的更新,更多的新特性得以

一个酷炫的Android图表制作框架

相关推荐

随机推荐