Я пытаюсь создать интерактивную визуализацию в приложении для Android.
Данные, которые будут визуализированы, будут храниться локально в базе данных sqlite
и будет запрошен для создания визуализации.
Я еще не решил, нужно ли создавать собственное приложение или веб-приложение.
Основываясь на моем исследовании, d3.js, похоже, очень хорошо отвечает потребностям, но я не уверен, как
использовать его в мобильной среде.
Вы можете легко вставлять Javascript в приложение для Android с помощью компонента WebView или использовать PhoneGap или аналогичную платформу. К сожалению, до Android 3.0 собственный браузер для Android не отображал svg, а D3 основан на SVG, поэтому он не будет работать в браузере android 2.3 (или ниже). Однако он работает в браузере Firefox.
Другой вариант - использовать InfoVis Toolkit в WebView или в телефонном разрыве. InfoVis Toolkit, похоже, работает лучше на Android.
Я не знаю сравнимую платформу визуализации Android, но D3, и ее предшественники Protovis, Flare и Prefuse - все с открытым исходным кодом. Вы можете попробовать портировать один из них на Android, возможно.
Вот связанный с этим вопрос: инструмент визуализации для мобильного (планшета)
Я получил D3 для работы над своим Android-приложением, выполнив этот учебник. Оттуда было легко расширить код учебника, чтобы он соответствовал моим потребностям.
Вот немного измененная версия учебника (я добавил элементы управления масштабированием и масштабирования):
<html>
<head>
<script type="text/javascript" src="file:///android_asset/js/d3.min.js"></script>
<script type="text/javascript" src="file:///android_asset/js/drawGraph.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=yes" />
</head>
<body>
<svg id="piechart"></svg>
</body>
</html>
function initGraph(dataset, pHeight, pWidth) {
var height = parseInt(pHeight);
var width = parseInt(pWidth);
var svg = d3.select("#piechart");
var textLabelSuffix = "%";
showPieChart(dataset, svg, height, width,
textLabelSuffix);
}
function showPieChart(dataset, svg, height, width,
textLabelSuffix)
{
var outerRadius = width / 2;
var innerRadius = 0;
// set height/width to match the SVG element
svg.attr("height", height).attr("width", width);
// create a new pie layout
var pie = d3.layout.pie();
// initialize arcs/wedges to span
// the radius of the circle
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// create groups
var arcs = svg.selectAll("g.arc")
// bind dataset to pie layout
.data(pie(dataset))
// create groups
.enter()
// append groups
.append("g")
// create arcs
.attr("class", "arc")
// position each arc in the pie layout
.attr("transform", "translate(" +
outerRadius + "," +
outerRadius + ")");
// initialize color scale - refer to
// https://github.com/mbostock/d3/wiki/Ordinal-Scales
var color = d3.scale.category10();
arcs.append("path")
.attr("fill", function(d,i) { return color(i); })
.attr("d", arc);
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) { return d.value +
textLabelSuffix; });
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tvOutgoing"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
public class VisualizationActivity extends AppCompatActivity {
private WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_visualization);
// Prepare webview: add zoom controls and start zoomed out
webview = (WebView) findViewById(R.id.webview);
final WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
webSettings.setUseWideViewPort(true);
webview.setWebChromeClient(new WebChromeClient());
webview.setInitialScale(1);
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
// after the HTML page loads, run JS to initialize graph
int dataset[] = new int[] {5,10,15,20,35};
String text = Arrays.toString(dataset);
webview.loadUrl("javascript:initGraph(" +
text + ", "
(webview.getHeight()) + ", "
+ (webview.getWidth()) + ")");
}
});
// Load base html from the assets directory
webview.loadUrl("file:///android_asset/html/graph.html");
}
}
Насколько мне известно, приложения для Android являются только java. Поэтому для использования d3 вам понадобится java javascript engine/wrapper (например, Rhino или по-видимому, PhoneGap) или просто создать приложение HTML5 ( а не приложение для Android как таковое).
Эта ссылка о PhoneGap, похоже, связана с созданием приложения из HTML5, но вам нужно проверить, что вы можете включать произвольные аддитатные библиотеки.
Нужно ли это приложение? D3 лучше подходит для написания сайта HTML5, а не для приложения.
Привет, у меня возникла проблема рендеринга графика в устанавливаемом приложении с помощью D3, C3 вместе с телефонной связью. Проблема была в том, что если вы попытаетесь выполнить c3.generate, она будет работать нормально в браузере, но не в устанавливаемом приложении, решение состоит в том, чтобы написать свою собственную директиву и использовать внутри нее C3.
Надеюсь, это поможет кому-то.