Android 系列 5.12使用Android RGraph创建HTML5图表
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");
}
}


阅读更多
所属专栏: android
想对作者说点什么? 我来说一句

Html5_使用RGraph插件制作图表

2012年02月07日 107KB 下载

基于html5android开发

2014年08月24日 2.16MB 下载

基于html5android开发教程解释

2015年11月25日 1.71MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭