Android 系列 5.12使用Android RGraph创建HTML5图表

原创 2017年01月10日 09:29:13
5.12使用Android RGraph创建HTML5图表

问题
您需要在图表中可视化数据,并且能够通过JavaScript与绘图/图表交互。

作为在纯Java中创建Android图表的替代方法,使用RGraph(一种HTML5 JavaScript图表库)创建图表。
RGraph不会在2.1之前的Android上工作,但这不应该是一个问题今天。
讨论
要使用RGraph创建图表,请按照下列步骤操作:
1.为HTML文件创建资产目录; Android内部将它映射到file:/// android_asset /(注意“资产”的三个斜杠和单数拼写)。
2.将rgraphview.html(请参阅示例5-18)复制到其中:res / assets / rgraphview.html。
3.创建一个JavaScript目录:res / assets / RGraph。
4.像在任何其他Android项目中一样创建布局(示例5-19)和活动(示例5-20)。
例5-18显示了使用RGraph库的HTML。图5-21显示了RGraph输出。

实例5-18。 HTML使用RGraph库

<html>
<head>
<title>RGraph: HTML5 canvas graph library - pie chart</title>
<script src="RGraph/libraries/RGraph.common.core.js" ></script>
<script src="RGraph/libraries/RGraph.common.annotate.js" ></script>
<script src="RGraph/libraries/RGraph.common.context.js" ></script>
<script src="RGraph/libraries/RGraph.common.tooltips.js" ></script>
<script src="RGraph/libraries/RGraph.common.zoom.js" ></script>
<script src="RGraph/libraries/RGraph.common.resizing.js" ></script>
<script src="RGraph/libraries/RGraph.pie.js" ></script>
<script>
window.onload = function () {
/**
* These are not angles - these are values.
* The appropriate angles are calculated
*/
var pie1 = new RGraph.Pie('pie1', [41,37,16,3,3]); // Create the pie object
pie1.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)',
'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
pie1.Set('chart.gutter', 30);
pie1.Set('chart.title', "Browsers (tooltips, context, zoom)");
pie1.Set('chart.shadow', false);
pie1.Set('chart.tooltips.effect', 'contract');
pie1.Set('chart.tooltips', [
'Internet Explorer 7 (41%)',
'Internet Explorer 6 (37%)',
'Mozilla Firefox (16%)',
'Apple Safari (3%)',
'Other (3%)'
]
);
pie1.Set('chart.highlight.style', '3d'); // 2d or 3d; defaults to 3d anyway
if (!RGraph.isIE8()) {
pie1.Set('chart.zoom.hdir', 'center');
pie1.Set('chart.zoom.vdir', 'up');
pie1.Set('chart.labels.sticks', true);
pie1.Set('chart.labels.sticks.color', '#aaa');
pie1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
}
pie1.Set('chart.linewidth', 5);
pie1.Set('chart.labels.sticks', true);
pie1.Set('chart.strokestyle', 'white');
pie1.Draw();
var pie2 = new RGraph.Pie('pie2', [2,29,45,17,7]); // Create the pie object
pie2.Set('chart.gutter', 45);
pie2.Set('chart.title', "Some data (context, annotatable)");
pie2.Set('chart.linewidth', 1);
pie2.Set('chart.strokestyle', '#333');
pie2.Set('chart.shadow', true);
pie2.Set('chart.shadow.blur', 3);
pie2.Set('chart.shadow.offsetx', 3);
pie2.Set('chart.shadow.offsety', 3);
pie2.Set('chart.shadow.color', 'rgba(0,0,0,0.5)');
pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']);
pie2.Set('chart.contextmenu', [['Clear',
function () {RGraph.Clear(pie2.canvas); pie2.Draw();}]]);
pie2.Set('chart.key', ['John (2%)', 'Richard (29%)',
'Fred (45%)', 'Brian (17%)', 'Peter (7%)']);
pie2.Set('chart.key.background', 'white');
pie2.Set('chart.key.shadow', true);
pie2.Set('chart.annotatable', true);
pie2.Set('chart.align', 'left');
pie2.Draw();
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="pie1" width="420" height="300">[No canvas support]</canvas>
<canvas id="pie2" width="440" height="300">[No canvas support]</canvas>
</div>
</body>
</html>




图5-21。 RGraph输出

实例5-19。 main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</WebView>
</LinearLayout>
Example 5-20. The main activity
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class Main extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Obtain reference to the WebView holder
WebView webview = (WebView) this.findViewById(R.id.webview);
// Get the settings
WebSettings webSettings = webview.getSettings();
// Enable JavaScript for user interaction clicks
webSettings.setJavaScriptEnabled(true);
// Display Zoom Controls
webSettings.setBuiltInZoomControls(true);
webview.requestFocusFromTouch();
// Set the client
webview.setWebViewClient(new WebViewClient());
webview.setWebChromeClient(new WebChromeClient());
// Load the URL
webview.loadUrl("file:///android_asset/rgraphview.html");
}
}


基于HTML5的ichartjs图表组件在Android应用中的使用

一、什么是ichartjs? 基于HTML5的图表组件 ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichar...
  • sara_loveyou
  • sara_loveyou
  • 2014年04月23日 11:35
  • 1998

图表rgraph

http://www.rgraph.net/examples/line.html
  • ArvinStudy
  • ArvinStudy
  • 2013年05月29日 15:53
  • 492

RGraph: Free HTML5 and JavaScript charts

After research js chart library, I determine to use RGraph:http://www.rgraph.net/   RGraph:是基于HTML5的...
  • wmjcom
  • wmjcom
  • 2013年03月27日 15:22
  • 4218

关于RGraph

RGraph:是基于HTML5的canvas标签,采用Javascript画图的库。 优点:由于是采用js在客户端浏览器上画图,所以它能快速显示页面和减轻服务器负载。 缺点:浏览器必须支持HTML...
  • lijiacumt
  • lijiacumt
  • 2012年01月10日 11:09
  • 5316

基于ichartjs图形库在android上使用HTML动态实现3D柱形图

转载地址:http://blog.csdn.net/sunquan1127/article/details/7940879       ichartjs 是一款基于HTML5的图...
  • l_215851356
  • l_215851356
  • 2017年04月03日 13:57
  • 359

html5 在Android 开发中的应用

这篇文章主要是说明以下几个问题: 1.Android 开发中使用网页的优点和缺点。 2.Android开发中哪些情况适合使用网页,哪些情况不适合使用网页。 3.html5网页与普通网页的区别。 4.A...
  • huang_rong12
  • huang_rong12
  • 2016年04月26日 15:17
  • 1543

13个js图表插件

现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件。我之前给一家网站做过复杂的图形,我们用的是 highchart。在那段时间,没有很多可供选择的插件。但现在不同了,很容...
  • mimixiao345
  • mimixiao345
  • 2015年07月16日 22:17
  • 363

使用HTML5开发Android本地应用(一)

HTML5是现在最热门的技术之一,Android自带的WebKit浏览器对于HTML5有着不错的支持,而各种浏览器的最新版本都开始普遍的支持HTML5。使用HTML5开发手机应用的主要好处有两个:一个...
  • l241002209
  • l241002209
  • 2011年11月24日 17:16
  • 1855

【Android 应用开发】Android 图表绘制 achartengine 示例解析

作者 : 韩曙亮转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/38420197一. AChartEngine 简介1. 项目地址...
  • han1202012
  • han1202012
  • 2014年08月13日 00:16
  • 10417

android跨平台开发系列之-综合运用webview和html5结合(三)

其实我是最近在开发中用到webview的时候才得出的一些使用webview的一些心得体会;记录一下,把知识整合一下,方便以后查阅 最近的一个需求是这样子的:C语言框架是别人写好了的,github上面...
  • sky_pjf
  • sky_pjf
  • 2016年09月03日 13:49
  • 1005
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 系列 5.12使用Android RGraph创建HTML5图表
举报原因:
原因补充:

(最多只允许输入30个字)