Bluetoothを介して受信したリアルタイムデータをプロットしたいAndroidアプリケーションを設計しています。信号を受信して処理し、結果を取得します。リアルタイムで表示したいと思います。チャートを描くためのさまざまなAndroidライブラリがあるのを見ました。そのようなライブラリの1つを使用するか、Javascriptを使用するかについて少し混乱しています。誰かがそれを提案することができますか?また、どのAndroidライブラリを使用しますか?
4 に答える
Android用のチャートライブラリはたくさんありますが、要件があるたびに、Canvasを使用してAndroidネイティブの2Dグラフィックフレームワークを使用しました。私は他の選択肢を探したことはありません。それはシンプルで、あなたはたくさんのコントロールを持っています。通知するだけです。
さまざまな種類のグラフの作成には、flot-android-chartを使用することをお勧めします。
または単に使用することができますachartengine
組み込みのjarファイルを使用せずにグラフを作成してみたい場合は、これを見てくださいBar Chart in Android With out any Built in jars
(ただし、これは棒グラフのみです) 。
Androidのリアルタイムチャートが必要な場合、現在最速のAndroidチャートライブラリはSciChartです。
リアルタイムの条件下で5つのオープンソースチャートと商用チャートを直接比較するパフォーマンス比較記事があり、すべてのテストで、SciChartがトップになります。
これにより、SciChartは、リアルタイムの取引アプリ、医療アプリ、科学アプリ、さらにはAndroidをオペレーティングシステムとして実行する組み込みシステムにも適しています。
開示:私はSciChartプロジェクトの技術リーダーです。ご存知のとおりです。
このレポは有望に見えます:Androidplot
jarファイルをローカルに保持するのではなく、gradleからのインポートをサポートしているようです。AnyChartも検討しましたが、これは有料のライブラリですが、AndroidplotはApache2.0ライセンスの下で提供されています。
READmeのスクリーンショット:
リンクが壊れた場合に備えて、クイックスタートガイドからコピーして貼り付けるだけです。
依存関係を追加する
gradleプロジェクトでライブラリを使用するには、build.gradleに以下を追加します。
dependencies {
compile "com.androidplot:androidplot-core:1.5.7"
}
Proguardの難読化を使用している場合(Android Studioによって作成されたプロジェクトはデフォルトで実行されます)、これをproguard-rules.proファイルに追加することもできます。
-keep class com.androidplot.** { *; }
アクティビティXMLレイアウトを作成する
Androidプロジェクトスケルトンを作成したら、res / layout / simple_xy_plot_example.xml を作成し、XYPlotビューを追加します。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ap="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent">
<com.androidplot.xy.XYPlot
style="@style/APDefacto.Dark"
android:id="@+id/plot"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
ap:title="A Simple XY Plot"
ap:rangeTitle="range"
ap:domainTitle="domain"
ap:lineLabels="left|bottom"
ap:lineLabelRotationBottom="-45"/>
</LinearLayout>
この例では、デフォルトのスタイルを使用してプロットを装飾しています。XMLスタイル設定可能な属性の完全なリストは、こちらから入手できます。新しい属性は定期的に追加されますが、すべての構成可能なプロパティがまだ利用できるわけではありません。
必要なものが不足している場合は、プロットのXML内で直接Fig構文を使用 し、各プロパティの前に「androidPlot」を付けます。例:
androidPlot.title="My Plot"
アクティビティを作成する
次に、で定義したXYPlotを表示するアクティビティを作成しましょうsimple_xy_plot_example.xml
。
基本的な手順は次のとおりです。
- Seriesのインスタンスを作成し、表示するデータを入力します。
- 1つまたは複数のシリーズを、描画時にシリーズがどのように見えるかを説明するために、フォーマッターとともにプロットインスタンスに登録します。
- プロットを描く
XYデータを使用しているため、XYPlot、SimpleXYSeries(XYSeriesインターフェイスの実装)、およびLineAndPointFormatterを使用します。
import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import com.androidplot.util.PixelUtils;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYSeries;
import com.androidplot.xy.*;
import java.text.FieldPosition;
import java.text.Format;
import java.text.ParsePosition;
import java.util.*;
/**
* A simple XYPlot
*/
public class SimpleXYPlotActivity extends Activity {
private XYPlot plot;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_xy_plot_example);
// initialize our XYPlot reference:
plot = (XYPlot) findViewById(R.id.plot);
// create a couple arrays of y-values to plot:
final Number[] domainLabels = {1, 2, 3, 6, 7, 8, 9, 10, 13, 14};
Number[] series1Numbers = {1, 4, 2, 8, 4, 16, 8, 32, 16, 64};
Number[] series2Numbers = {5, 2, 10, 5, 20, 10, 40, 20, 80, 40};
// turn the above arrays into XYSeries':
// (Y_VALS_ONLY means use the element index as the x value)
XYSeries series1 = new SimpleXYSeries(
Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1");
XYSeries series2 = new SimpleXYSeries(
Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");
// create formatters to use for drawing a series using LineAndPointRenderer
// and configure them from xml:
LineAndPointFormatter series1Format =
new LineAndPointFormatter(this, R.xml.line_point_formatter_with_labels);
LineAndPointFormatter series2Format =
new LineAndPointFormatter(this, R.xml.line_point_formatter_with_labels_2);
// add an "dash" effect to the series2 line:
series2Format.getLinePaint().setPathEffect(new DashPathEffect(new float[] {
// always use DP when specifying pixel sizes, to keep things consistent across devices:
PixelUtils.dpToPix(20),
PixelUtils.dpToPix(15)}, 0));
// just for fun, add some smoothing to the lines:
// see: http://androidplot.com/smooth-curves-and-androidplot/
series1Format.setInterpolationParams(
new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal));
series2Format.setInterpolationParams(
new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal));
// add a new series' to the xyplot:
plot.addSeries(series1, series1Format);
plot.addSeries(series2, series2Format);
plot.getGraph().getLineLabelStyle(XYGraphWidget.Edge.BOTTOM).setFormat(new Format() {
@Override
public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) {
int i = Math.round(((Number) obj).floatValue());
return toAppendTo.append(domainLabels[i]);
}
@Override
public Object parseObject(String source, ParsePosition pos) {
return null;
}
});
}
}
上記のコードの潜在的に紛らわしいセクションの1つは、LineAndPointFormatterの初期化
です。おそらく、xmlリソースファイルへの不思議な参照を取得していることに気づいたでしょう。これは実際にはFigを使用してXMLからインスタンスプロパティを構成しています。
XMLを避け、すべてをJavaで保持したい場合は、コードを置き換えるだけです。
LineAndPointFormatter series1Format =
new LineAndPointFormatter(this, R.xml.line_point_formatter_with_labels);
と:
LineAndPointFormatter series1Format = new LineAndPointFormatter(Color.RED, Color.GREEN, Color.BLUE, null);
一般に、XML構成は、画面密度などによるプロパティの定義に関して柔軟性が高いため、可能な場合はプログラム構成よりも使用する必要があります。フォーマッターなどをプログラムで構成する方法の詳細については、最新のJavadocを参照してください。
上記の元の例を続けて、次のファイルを/ res/xmlディレクトリに追加します。
/res/xml/line_point_formatter_with_labels.xml
<?xml version="1.0" encoding="utf-8"?>
<config
linePaint.strokeWidth="5dp"
linePaint.color="#00AA00"
vertexPaint.color="#007700"
vertexPaint.strokeWidth="20dp"
fillPaint.color="#00000000"
pointLabelFormatter.textPaint.color="#CCCCCC"/>
/res/xml/line_point_formatter_with_labels_2.xml
<?xml version="1.0" encoding="utf-8"?>
<config
linePaint.strokeWidth="5dp"
linePaint.color="#0000AA"
vertexPaint.strokeWidth="20dp"
vertexPaint.color="#000099"
fillPaint.color="#00000000"
pointLabelFormatter.textPaint.color="#CCCCCC"/>