hello chart——柱状图

最新推荐文章于 2024-08-08 07:48:50 发布
最新推荐文章于 2024-08-08 07:48:50 发布
阅读量4.5k 收藏 8
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/god_wen/article/details/67640372
版权

先看一个例子：
test.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <lecho.lib.hellocharts.view.ColumnChartView
        android:id="@+id/test_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Test.java:

package com.example.administrator.chart.test;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

import com.example.administrator.chart.R;

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

import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.ColumnChartView;

/**
 * Created by Administrator on 2017/3/28.
 */

public class Test extends AppCompatActivity{
    ColumnChartView columnChartView=null;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        columnChartView=(ColumnChartView) findViewById(R.id.test_content);
        generateDefaultData();
    }

    private void generateDefaultData(){
           //定义有多少个柱子
          int numColumns = 8;
         //定义表格实现类
        ColumnChartData columnChartData;
        //Column 是下图中柱子的实现类
        List<Column> columns =new ArrayList<>();
        //SubcolumnValue 是下图中柱子中的小柱子的实现类，下面会解释我说的是什么
        List<SubcolumnValue>  values=new ArrayList<>();
        //循环初始化每根柱子，
        for(int i=0;i<numColumns;i++){
            //每一根柱子中只有一根小柱子
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
            //初始化Column
            Column column = new Column(values);

             columns.add(column);

        }
        //给表格添加写好数据的柱子
        columnChartData = new ColumnChartData(columns);
        //给画表格的View添加要画的表格
        columnChartView.setColumnChartData(columnChartData);

    }
}

这里写图片描述
上面完成了基本的柱状图（只有不同颜色的柱子），显然这种图表没用途，但是很简单。在讲解上面代码什么意思之前我们聊一聊HelloChart是怎么设计的。

当我们通过HelloChart话柱状图时，我们需要两个东西。一个放表格的地方ColumnChartView，一个真正的表示表格的类ColumnChartData。

ColumnChartView

通过他的名字我们一下就知道他是干什么的，他就是显示柱状图的View。这个类因为是一个View所以他的父类AbstractChartView中重写很多View的函数，同时定义了一大图表绘制的方法，比如缩放的函数就在其中（所以我们不用谢缩放了）。这些方法会根据我们设置的图表来绘制到ColumnChartView所以我就不多赘述了，感兴趣的可以看看源码。

关键方法
setOnValueTouchListener添加点击数据时的监听，这是这个类的灵魂。后面详细说

getxxx 返回我们真正的表格类ColumnChartData
setColumnChartData 添加真正的表格ColumnChartData，来把它画出来。

ColumnChartData

这个类就是我们的主角了，他就是我们的真正的表格了，而ColumnChartView只是充当画师的作用，来画出ColumnChartData。现在我们可以来说一说上面的代码了。

Column，SubcolumnValue

上面注释的解释，对于这个类可能有点蒙，现在我们修改上面的for循环来看看，这个东西到底是干什么的。修改成下面这一样

   for(int i=0;i<numColumns;i++){
            //每一根柱子中只有一根小柱子
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
            //初始化Column
            Column column = new Column(values);

             columns.add(column);

        }

这里写图片描述
现在我们会发现 在每一个分隔之间是有连根柱子拼在一起的。我们可以这样理解。
Column表示一个大柱子，有多个柱子组成，每一个大柱子都是分割开的，而
SubcolumnValue就是组成大柱子的小柱子，这些小柱子拼在一起。其中
Column的构造函数接受存储SubcolumnValue的list数值。且
columnChartData 的构造函数接受存储Column的l**list**数值。

这张图标好像有很多问题，比如我根本不知道这些图表横纵表示什么，现在我们就来填补这些遐思

Axis

这个类就是我们想写的横纵轴的实现类了。在上面的代码中我们加入下面代码。

     columnChartData = new ColumnChartData(columns);

        Axis axisBootom = new Axis();
        Axis axisLeft = new Axis();

        axisBootom.setName("axis Bootom");
        axisLeft.setName("axis Left");


        columnChartData.setAxisXBottom(axisBootom);
        columnChartData.setAxisYLeft(axisLeft);

        columnChartView.setColumnChartData(columnChartData);

这里写图片描述

可以发现我们只是添加了相应的Name，但是框架自动生产了对应的数字.但是我们一般底部轴都显示成有用信息，所以我们还要修改一下

   columnChartData = new ColumnChartData(columns);

        Axis axisBootom = new Axis();
        Axis axisLeft = new Axis();

        List<AxisValue> axisValuess=new ArrayList<>();
        for(int i=0;i<numColumns;i++){

            axisValuess.add(new AxisValue(i).setLabel("lable"+i));
        }
        axisBootom.setValues(axisValuess);
        axisBootom.setName("axis Bootom");
        axisLeft.setName("axis Left");


        columnChartData.setAxisXBottom(axisBootom);
        columnChartData.setAxisYLeft(axisLeft);

        columnChartView.setColumnChartData(columnChartData);

这里写图片描述

和之前的说的设计很相似，Axis类表示轴，而其中的每个数据信息会用存储AxisValue类的list表示。接着看上面的图，你会发现好像还是不怎么好看数据。接下来我们接着来完善我们的表格。向上面的代码加入下面代码


        int numColumns = 8;
        ColumnChartData columnChartData;
        List<Column> columns =new ArrayList<>();
        List<SubcolumnValue>  values;

        for(int i=0;i<numColumns;i++){
            values=new ArrayList<>();
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
            Column column = new Column(values);
            //给每一个柱子表上值
            column.setHasLabels(true);
            columns.add(column);

        }


        columnChartData = new ColumnChartData(columns);

        Axis axisBootom = new Axis();
        Axis axisLeft = new Axis();

        List<AxisValue> axisValuess=new ArrayList<>();
        for(int i=0;i<numColumns;i++){

            axisValuess.add(new AxisValue(i).setLabel("lable"+i));
        }
        axisBootom.setValues(axisValuess);
        axisBootom.setName("axis Bootom");
        axisLeft.setName("axis Left");
        //加入横线
        axisBootom.setHasLines(true);
        axisLeft.setHasLines(true);
        columnChartData.setAxisXBottom(axisBootom);
        columnChartData.setAxisYLeft(axisLeft);

        columnChartView.setColumnChartData(columnChartData);

这里写图片描述

这样感觉很不错，但是好像有点乱怎么办，我们在添加点东西

....
            column.setHasLabels(true);
            //添加的地方，选中时出现label
            column.setHasLabelsOnlyForSelected(true);
            columns.add(column);
  ....
        columnChartData.setAxisYLeft(axisLeft);
        //添加的地方，选中时变粗。通常情况下点击变粗会立马缩回去，现在回变粗停住停住
        columnChartView.setValueSelectionEnabled(true);
        columnChartView.setColumnChartData(columnChartData);

这里写图片描述

现在好像ok了，是的。正常的图表做成这样已经ok了。但是还有东西要说

先说一说特效吧，hellochart封装了一些特效，方便不懂android 特效的人，也可以方便使用，具体实现是通过android 3.0引入的属性特效来实现。感兴趣的朋友可以去看看源码。现在我们来看看 hellochart是怎么是实现特效的

首先hellochart为我们提供了一些特效，现在我们来看看柱状图的，AbstractChartView类中我们可以使用的动画

    protected ChartDataAnimator dataAnimator;
    protected ChartViewportAnimator viewportAnimator;

这两个动画会更具版本android 版本自动根据相应的兼容版本的动画，这个就是我们柱状图可以使用的两个动画了。怎么使用呢。

ChartDataAnimator

  1. 调用SubcolumnValue的setTarget为动画设置初始值
  2. 调用ColumnChartView的startDataAnimation方法。启动动画
    是不是很简单
.......
        for(int i=0;i<numColumns;i++){
            values=new ArrayList<>();
            //初始化数据值，同时也初始化动画值
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5,
                    ChartUtils.pickColor()).setTarget((float) Math.random() * 100));
            values.add(new SubcolumnValue((float) Math.random() * 50f + 5,
                    ChartUtils.pickColor()).setTarget((float) Math.random() * 100));


            Column column = new Column(values);
.....
        columnChartView.setColumnChartData(columnChartData);
        //启动动画
        columnChartView.startDataAnimation(2000);

因为gif太大了。占时没有找到压缩软件，所以先放了，希望有好的gif制作软件留言给我

对于另一种动画我们会在别的图形中说明它，现在不提了

ColumnChartData的不同样式

我们之前说过ColumnChartData就是我们的柱状图，而我们之前的例子都是默认的柱状图类型。其实他还有下面几种

stacked

 data.setStacked(true);

效果如下
这里写图片描述

每一个Column 中的SubcolumnValue就会竖着吗在一起了

Negative

当有的数据是负的时候就会出现这些Negative效果，这个效果只要我们在为SubcolumnValue设置值是使用负的就ok。

.....

 int[] sign = new int[]{-1, 1};
 sign[Math.round((float) Math.random())];
  values.add(new SubcolumnValue((float) Math.random() * 20f * sign + 5 * sign, ChartUtils.pickColor()));

 ....

加入这些这句代码之后我们的图标就会把相应的Column变成倒立的
这里写图片描述
这里写图片描述

我想吹水
关注
专栏目录
ZoomCharts教学(二)——Vue整合zoomCharts--HelloWorld
小龙哒的博客
08-24 2328
1.准备vue脚手架 这里网上一搜一大堆，2.x或者3.0+ 都行的 如果是小白，可以参考我的这篇博客 《vue从零搭建脚手架教程》 这里是我使用的vue3.0的脚手架目录结构 2.引入zoomcharts 在package.json文件里面的dependencies里面加入依赖(这里我使用1.18.10来演示) "@dvsl/zoomcharts": "^1.18.10", 3.安装依赖 打开cmd进入目录执行 npm install 等待加载完即可 4.HelloWorld 这里为了方便，我实现
一个傻瓜式构建可视化 web的 Python 神器 ——streamlit
2401_84692513的博客
04-29 836
正常在学习一个新框架之前， 肯定要先调研下这个框架究竟能做些什么事吧？但对于 streamlit 来说，请你相信我，这是一个你可以无脑去学习的框架，我之所以这么说，是因为我相信终有一天，你一定能用得上它。Streamlit 是一个用于机器学习、数据可视化的 Python 框架，它能几行代码就构建出一个精美的在线 app 应用。streamlit 的功能强大，要学习的函数虽然多，但非常容易上手，学习成本却远比 前端+Flask 来得低得低。接下来，我会一一介绍。# 1. 如何安装？
Android 实用HelloCharts实现 线性图、柱状图
08-23
非常好用的线性图、柱状图
hellochart详细讲解（三）柱状图
wenzhi的博客
07-05 6452
hellochart详细讲解（三）柱状图之前有介绍HelloChart图形绘制框架的使用，还有各种效果图： http://blog.csdn.net/wenzhi20102321/article/details/73133718之前没有对各个图形设计做详细介绍。 本文重点hellochart柱状图的设计。总览图：一共显示4种基本图形，其他的一些样式感觉没啥用处。
HelloCharts Android 图表库教程
最新发布
gitblog_00234的博客
08-08 672
HelloCharts Android 图表库教程 hellocharts-androidCharts library for Android compatible with API 8+, several chart types with scaling, scrolling and animations ????项目地址:https://gitcode.com/gh_mirrors/he/hell...
hellocharts_柱状图
qingdaohaoyunpeng的专栏
04-10 6716
先看看最终效果 项目中涉及到了图表显示数据，之前听说过出名的图表库有MPAndroidChart和hellocharts，这次选用的是hellocharts。 项目地址https://github.com/lecho/hellocharts-android 使用: xml中 <lecho.lib.hellocharts.view.ColumnChartView
HelloCharts图表库之柱状图
suger_CSDN的博客
12-16 2135
HelloCharts项目giuhub网址：https://github.com/lecho/hellocharts-android； 柱状图的使用 1,在布局文件中声明控件<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
Android 图表开源框架HelloCharts 之 柱状图、折线图、饼状图
03-09
通过 ViewPager 与 Fragment 实现 水平页面滑动分别显示 饼状图、折线图、柱形图
DrawLinesTest
11-12
HelloChart是一个轻量级、自定义程度高的Android图表库，支持多种类型的图表，如折线图、柱状图、饼图等，且性能优秀，适合各种规模的项目。 3. **使用流程** - 引入库：首先需要在项目中引入HelloChart库，可以...
mermaid流程图工具_Markdown绘图插件 —— Mermaid教程
weixin_28701593的博客
02-01 2052
mermaid简介当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。先来看个例子:1、流程图(flowchart)graphLR;A-->B;A-->C;B-->D;C-->...
前端图表插件ECharts入门教程
无发可说的博客
12-09 568
在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢?不要慌，在下今天就给大家推荐一个前端大佬们用的非常火的图表插件——ECharts。 ECharts特性简介 ECharts是一个使用 JavaScript 实现的开源可视化库 ，啥叫开源呢，通俗点说，就是免费!不要钱!小伙伴们可以大胆放心的使用，可视化工具呢，就是将一系列的数据，转化成非常直观的图表，来供大家查看，ECharts可谓是制作图表的良心之选，并且可以流畅的运行在 PC 和移
hellochart
05-26
折线图demo eclipse版本
HelloChart-
08-28
安卓中绘制折线、柱状、扇形、饼状等多种图形工具jar包
hellochart开源图表框架Demo
01-16
根据我的博文所写的一个关于实现hellochart开源框架的demo
简单详细，开源的helloChart 图表开发
02-10
图表开发工具，自测ok，能用0202020202020202020
HelloChart jar包
08-22
HelloCharts最新jar下载 下载里面的hellocharts-library-XXX.jar 复制到你项目的libs文件夹即可
hellocharts图表插件---柱状图
芒果蜜桃π
08-03 980
hellocharts图表插件---柱状图
Android : hellocharts-android-master图表框架集成 及 新手花式教学（干货满满）------柱状图
热门推荐
lemonGuo的大脑皮层、小脑、海马体、杏仁核.....
04-14 1万+
开发中设计到一个用图表的形式来展现学生成绩的需求，于是果断在github上找相关的开源库，最后锁定了hellocharts-android-master 和 MPAndroidChart-master两者，在进行一番比较后，虽然后者star更多（出现较早），但是前者不仅是UI还是功能上更胜一筹，决定使用前者，完成项目需求开发。 一. 简介及集成 1.简介 该开源库可完成线形图、柱状图
hellocharts-android柱状图和饼图
折耳根的羹
09-07 864
这个效果图除了使用hellochart框架以外，还可以使用Echart完成，本人就是先用Echart写了一遍然后才回头再来用hellochart写。原因就是感觉用Android 原生调用js代码调用感觉很蛋疼，浪费我一天的工时。 示例效果图: 柱状图： 不作过多解释，网上很多示例，稍加改改就可以完成 &lt;lecho.lib.hellocharts.view.ColumnChart...
android helloChart和MPandroidChart
07-25
HelloChart是一个开源的图表库，提供了多种图表类型，包括线性图、饼图、柱状图等。它具有简单易用的API和丰富的样式选项，可以快速创建漂亮的图表。HelloChart的GitHub仓库地址是：...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值