HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

Highcharts Android

最后修改时间:2019-08-26 19:24

Highcharts Android 是官方发布的 Andrioid 扩展包,可以很方便的在 Android 开发环境中使用 Highcharts 创建交互性图表。

开发环境

  • 下载好的 Highcharts 框架

Highcharts 框架的下载

有以下两种方式可以下载 Highcharts 框架:

方法一: 直接在 gradle 文件中添加 Highcharts 仓库

在 build.gradle 文件里添加 Highcharts 仓库

repositories { 
    maven { 
        url "https://highsoft.bintray.com/Highcharts" 
    }
}

并添加相关依赖

dependencies {
    compile 'com.highsoft.highcharts:highcharts:6.1r'
}

方法二: 直接从 https://github.com/highcharts/highcharts-android/releases 下载 aar 文件,并放置在 libs 目录,如下图所示:

然后在 build.gradle 里添加 repositories ,代码如下:

repositories {
    flatDir {
        dirs 'libs'
    }
}

并添加相关依赖

dependencies {
    compile (name: 'highcharts-release', ext:'aar')
    compile 'com.google.code.gson:gson:2.8.0'
}

使用

接下来,以一个示例项目的创建简单介绍一下 Highcharts Android 的基本使用方法。

步骤

  • 创建 Android 项目
  • 在 view 中创建图表 view
  • 创建图表配置并添加到图表 view 中
  • 运行并查看效果

1. 布局准备(添加 view)

首先我们需要为图表创建一个 view,打开 activity_main.xml 并添加下面的代码:

<com.highsoft.highcharts.Core.HIChartView
    android:id="@+id/hc"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. 在 Activity 里添加 HIChartView

首先在 MainActivity.java 的顶部引入 Highcharts 相关的包

import com.highsoft.highcharts.Core.*;
import com.highsoft.highcharts.Common.HIChartsClasses.*;

然后在 onCreate 方法里添加 HIChartView

HIChartView chartView = (HIChartView) findViewById(R.id.hc); 
// R.id.hc 定义在上面的 activity_main 里

完成这个步骤后,将会根据布局里定义的大小来创建一个图表视图,现在可以开始创建图表了。

3. 创建图表

为了方便演示,这里用虚拟数据创建一个简单柱形图。

图表的核心是配置,也就是 HIOptions 这个类,它包含所有需要配置。

创建 HIOptions 实例

HIOptions options = new HIOptions();

首先我们来设置图表类型,通过创建 HIChart 实例并赋值,代码如下:

HIChart chart = new HIChart();
chart.setType("column");

将 HIChart 实例赋值给 options

options.setChart(chart);

然后我们来创建标题对象并赋值,同样的该对象最终也是赋值给 options

HITitle title = new HITitle();
title.setText("Demo chart");

options.setTitle(title);

现在我们来给图表设置一些数据,这里创建的是柱形图,所以用 HIColumn 数据列。

HIColumn series = new HIColumn();

数据是 ArrayList,通过 setData 来赋值给数据列

series.setData(new ArrayList<>(Arrays.asList(49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4)));

因为图表有多个数据列,所以这里用 ArrayList 来存放数据列并赋值给 options(即数据列是个数组)。

options.setSeries(new ArrayList<HISeries>(Collections.singletonList(series))); 

最后将 options 赋值给视图

chartView.setOptions(options);

到此我们已经完成了所有步骤,现在 MainActivity.java 的代码如下:

package com.highsoft.highchartsdemo;

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

import com.highsoft.highcharts.Core.*;
import com.highsoft.highcharts.Common.HIChartsClasses.*;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        HIChartView chartView = (HIChartView) findViewById(R.id.hc);

        HIOptions options = new HIOptions();

        HIChart chart = new HIChart();
        chart.setType("column");
        options.setChart(chart);

        HITitle title = new HITitle();
        title.setText("Demo chart");

        options.setTitle(title);

        HIColumn series = new HIColumn();
        series.setData(new ArrayList<>(Arrays.asList(49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4)));
        options.setSeries(new ArrayList<HISeries>(Collections.singletonList(series)));

        chartView.setOptions(options);
    }
}

4. 运行并查看结果

在 Android Studio 里点击 “Run” 即可查看运行结果

更多详情请参考演示 Demo Example 里的示例项目

更多内容

1. 导出功能

导出功能需要进行额外的设置,步骤如下:

  1. 在 manifest 里指定 provider:

    <provider android:authorities="com.your.package.name.FileProvider" <!-- com.your.package.name 需要修改 -->
    android:name="android.support.v4.content.FileProvider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/provider_paths"/>
    </provider>
    
  2. 在 res 下创建 xml 目录并创建 provider_paths.xml,内容如下:

    <?xml version="1.0" encoding="utf-8"?>
    <paths>
    <files-path name="export" path="." />
    </paths>
    

    导出功能效果(以图表的形式分享):

2. HIColor 示例

Highcharts Android 扩展包提供了自己的颜色实现。在图表配置里,有部分配置是 HIColor 类型。 您可以通过多种方法来是实例化所需的颜色(详见 API 文档)。 在这里,我们简单说明最复杂的渐变颜色的使用。

首先,需要创建 HIGradient 实例:

HIGradient gradient = new HIGradient(0, 0.5f, 1, 1); // 可以使用空构造函数,

然后,定义 HIStop

LinkedList<HIStop> stops = new LinkedList<>();
stops.add(new HIStop(0.4f, HIColor.initWithRGB(160, 160, 160)));
stops.add(new HIStop(1, HIColor.initWithRGB(60, 60, 60)));

有了上述两个对象,就可以实例化 HIColor,例如设置图表的背景色

HIChart chart = new HIChart();
chart.setBackgroundColor(HIColor.initWithLinearGradient(gradient, stops));

3. HIFunction 示例

Highcharts Android 支持点击事件回调函数与原生程序绑定(即可以在点击事件里执行 Android 原生行为)。下面示例展示了通过原生 Toast 来显示当前点击的点的坐标。

首先,创建一个数据列

HISpline spline = new HISpline();
spline.setData(new ArrayList<>(Arrays.asList(0.3,5.3,8.0,9.1,3.2,5.4,4.0,4.2,2.1,10.0)));

然后,给数据点绑定点击事件及回调函数,代码如下:

spline.setPoint(new HIPoint());
spline.getPoint().setEvents(new HIEvents());
spline.getPoint().getEvents().setClick(new HIFunction(
        f -> {
            Toast t = Toast.makeText(
                this,
                "Clicked point [ " + f.getProperty("x") + ", " + f.getProperty("y") + " ]",
                Toast.LENGTH_SHORT);
                t.show();
            },
            new String[] {"x", "y"}
));

上述代码中 HIFunction 中的第一个参数是 lambda 表达式定义的回调函数,第二个参数是图表中的变量数组(这些变量是当前事件对象的属性,例如 'x' 表示 point.x ),在回调函数里通过 getProperty 来获取这些变量。更多详情请参考 API 文档.

API 文档

地址:API 文档

演示 Demo

地址:演示 Demo

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:Highcharts Android | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/highcharts-android/

   上一篇 未完待续...
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22