您的位置：首页 > 移动开发 > Android开发

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

2017-01-10 09:29 423 查看

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 布局 javascript android应用

相关文章推荐

新的分享

章节导航