Android数据可视化
16lz
2021-12-04
Android数据可视化
- 前言
-
- ECharts
-
-
-
- 移动端优化
- ECharts官网
-
-
- 下载ECharts组件
-
-
-
- EChart 依赖库
-
-
前言
由于最近做数据分析与安卓记账本小程序,使用到了关于数据可视化绘图的相关工具,特此记录安卓绘制饼图,柱状图等方法。Android绘制图表,一般都会采用第三方图表框架,简单而且实现效果好。安卓的图标框架有很多,主流的有MPAndroidChart、hellocharts-android-master以及许多GitHub上的框架,由于之前在研究大数据的时候用到了百度ECharts这个框架,就给大家介绍这个框架。
ECharts
Echarts是百度
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
移动端优化
ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。
细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。
ECharts官网
ECharts
https://echarts.baidu.com/
下载ECharts组件
ECharts组件
https://echarts.baidu.com/download.html
将下载好的echarts.min.js文件放入工程中assets目录下。如果没有assets目录,可以先在mian目录下,通过右击 new -> Folder -> Assets Folder 创建。编写echarts.html文件,并将echarts.html放入assets目录。
<html style="height: 100%"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%">div> <script type="text/javascript" src="./echarts.min.js">script> <script type="text/javascript"> var dom =document.getElementById("container"); var myChart =echarts.init(dom); var app ={ }; function loadEcharts(echartJson){ var option = JSON.parse(echartJson); if (option &&typeof option ==="object") { myChart.setOption(option,true); } } script> body>html>
EChart 依赖库
dependencies { compile 'com.github.abel533:ECharts:3.0.0.2' implementation 'com.google.code.gson:gson:2.8.1'}
因为Echarts需要在WebView中显示,所以我们直接自定义一个EchartView继承自WebView用来显示图表。
public class EchartView extends WebView { private static final String TAG = EchartView.class.getSimpleName(); public EchartView(Context context) { this(context, null); } public EchartView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public EchartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { WebSettings webSettings = getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); webSettings.setSupportZoom(false); webSettings.setDisplayZoomControls(false); loadUrl("file:///android_asset/echarts.html"); } public void refreshEchartsWithOption(GsonOption option) { if (option == null) { return; } String optionString = option.toString(); String call = "javascript:loadEcharts('" + optionString + "')"; loadUrl(call); }}
最后设置图表参数
public class MainActivity extends AppCompatActivity { private EchartView lineChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lineChart = findViewById(R.id.lineChart); lineChart.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //最好在h5页面加载完毕后再加载数据,防止html的标签还未加载完成,不能正常显示 refreshLineChart(); } }); } private void refreshLineChart(){ Object[] x = new Object[]{ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }; Object[] y = new Object[]{ 820, 932, 901, 934, 1290, 1330, 1320 }; lineChart.refreshEchartsWithOption(EchartOptionUtil.getLineChartOptions(x, y)); }}
显示效果
官方还有很多图形样式
作者:陈奇涵 原文链接
更多相关文章
- html移动应用开发技术分享
- 【自定义控件系列四】android绘制实战(一)通过Canvas+Path+Paint
- BootChart在Android中使用
- android:configChanges属性
- Android图表应用分享
- Android中检测手机制式和移动网络类型
- Android实时直播,一千行java搞定不依赖jni,延迟0.8至3秒,强悍移动端
- Android获取手机信息
- 为iPhone,iPad,Android和其他移动设备启用Lync