タイトルは私の質問のほとんどを伝えていると思いますが、詳細と背景を少し説明しましょう。
TimeCharts にいくつかの異なるリアルタイム データを表示する、主にタブレットに焦点を当てた Android アプリがあります。したがって、データを取得して解析し、値をシングルトン TimeSeries に追加するデータ ソースと通信するサービスが既にあります。ユーザーがフラグメントの内外をナビゲートすると、フラグメントは正しい TimeSeries を追加し、500 ミリ秒mChartView.repaint();ごとに呼び出し続けます。
すべてが操作可能で、タブ、ローテーション、通知などでうまく機能しています。
タブレット アプリなので、次の 2 つのことを実現したいと考えています。1) 表示領域を最大化する。2) 見栄えをよくする。
1）ズームボタンをすでに削除しました（何らかの理由で追加しようとするとNullExceptionが発生します）がmRenderer.setZoomButtonsVisible(false);、まだ多くの画面スペースを占める巨大な下マージンがあります。負の境界線を設定しようとしましたが、機能しますが、ラベルはこの境界線で移動せず、X 軸がラベルを横切るか、通過することさえあります。ラベルを境界線で下に移動したり、グラフの上部に配置したりするにはどうすればよいですか?
2) a) アプリは、Holo_Dark または Holo_light のいずれかを使用するようにユーザーが構成できます。そのため、レンダラーで透明な背景を使用して (以下のスニペットを参照)、ホロが行う素晴らしい背景シェーディングを示しています。軸のテキストの色を変更するには? を見つけましたmRenderer.setAxesColor(color)が、テキストではなく行のみを変更します。
int color = Color.argb(0, 255, 255, 255); // Transparent colour
mRenderer.setBackgroundColor(color);
mRenderer.setMarginsColor(color);
b) Y 軸がラベルの上を横切っています。テキストが読みやすいように、ラベルを少し左にオフセットするにはどうすればよいですか? （付きではありませんsetMargins()）
c) ユーザーがチャートをズームおよびパンすると、チャートは画面上の最新の値の更新/再ズームを停止し、ユーザーはパンを継続して最新の値を表示する必要があります。ActionBar に [ズームのリセット] ボタンを追加しましたが、機能しません。値を再度更新するためのコードは何でしょうか。
d) TimeSeires の範囲が 10 分 (1 秒あたり 2 つの値) の場合、(たとえば) 最後の 1 分のみを表示するにはどうすればよいですか? (および c) 再起動の使用ボタン)
現時点では、私のレンダリングは次のように設定されています:
int color = Color.argb(0, 255, 255, 255); // Transparent colour
mRenderer.setBackgroundColor(color);
mRenderer.setMarginsColor(color);
mRenderer.setAxisTitleTextSize(16); // 16
mRenderer.setChartTitleTextSize(20); // 20
mRenderer.setLabelsTextSize(15); // 15
mRenderer.setLegendTextSize(15); // 15
mRenderer.setPointSize(0); // 10
mRenderer.setMargins(new int[] { 20, 30, 15, 0 });
mRenderer.setZoomButtonsVisible(false);
mRenderer.setShowAxes(true);
mRenderer.setShowLegend(true);
mRenderer.setShowGridX(true);
mRenderer.setShowLabels(true);
Multiple renderer に追加された各レンダリングは次のようになります。
renderer.setDisplayChartValues(false);
mRenderer.addSeriesRenderer(renderer);
すべての助けに感謝します！
他の人が見られるように私の最終的なコードを含めるためだけに編集します:
凡例を完全に捨てて、グラフの上に浮かぶ独自の凡例を実装することになったので、レイアウトは ChartView と TableLayout を持つ FrameLayout です。
いくつかのクラスによって拡張された抽象 CurvesFragment クラスを実装しました。
フラグメントの OnCreateView 中にチャートを次のように構成します。
mChartView = ChartFactory.getTimeChartView(getActivity().getApplicationContext(), mDataset, mRenderer, "HH:mm:ss"); // X axis in a time scale
// Setup chart renderer =============================
mRenderer.setLabelsTextSize(15); // Text size
mRenderer.setMargins(new int[] { 0, Utils.convertToPx(5, getActivity().getApplicationContext()), 0, 0 }); // 5dp on the left to show that little line
mRenderer.setZoomButtonsVisible(false); // bye bye zoom
mRenderer.setShowAxes(true); // show both axes
mRenderer.setShowLegend(false); // bye bye legend
mRenderer.setShowGridX(true); // X grid helps identify values
mRenderer.setShowLabels(true); // See the values
mRenderer.setYLabelsAlign(Align.LEFT); // put the Y labels on the left of the axis
if (Utils.getCurrentTheme(getActivity().getApplicationContext()) == android.R.style.Theme_Holo) {
mRenderer.setXLabelsColor(getResources().getColor(android.R.color.primary_text_dark));
mRenderer.setYLabelsColor(0, getResources().getColor(android.R.color.primary_text_dark));
mRenderer.setMarginsColor(getResources().getColor(android.R.color.background_dark));
legend.setBackgroundResource(R.drawable.border_dark);
} else {
// same as above but for Holo_light
}
// And from here proceed to add the TimeCharts with using
renderer.setDisplayChartValues(false);
私のアクション バーには、一時停止/再開と ResetZoom のボタンが含まれています。ズームのリセットは簡単です。
mRenderer.setXAxisMax(-Double.MAX_VALUE);
mRenderer.setXAxisMin(Double.MAX_VALUE);
mRenderer.setYAxisMax(-Double.MAX_VALUE);
mRenderer.setYAxisMin(Double.MAX_VALUE);
mChartView.repaint();
常に WiFi から新しいデータを読み取り、シリーズに追加する TimeSeries への参照を保持するバックグラウンド サービスがあります。そのようにして、フラグメントには、次のように repaint() を呼び出す 700 ミリ秒ごとに実行される実行可能ファイルがあります。
// Chart rendering control ========================
private Runnable updateDataSet = new Runnable() {
public void run() {
if (!chartPaused) {
double max = mRenderer.getXAxisMax(); // get renderer maximum value
double min = mRenderer.getXAxisMin(); // get renderer minimum value
// Check if the user scrolled/zoomed/panned the graph or if it's on 'auto'
if (!((max == Double.MAX_VALUE || max == -Double.MAX_VALUE) && (min == Double.MAX_VALUE || min == -Double.MAX_VALUE))) {
double newMax = mDataset.getSeriesAt(0).getMaxX(); // new max is the latest value from our series
double newMin = newMax - Math.abs(max - min); // new min value is the X range the user zoomed into
mRenderer.setXAxisMax(newMax); // set the new values
mRenderer.setXAxisMin(newMin);
}
// Logic that updates the TableLayout with the legend is placed here
mChartView.repaint();
}
getView().postDelayed(updateDataSet, 700);
}
};
また、ユーザーがグラフに触れるたびにグラフを一時停止する ZoomListener と PanListener があります。そうすれば、ユーザーはズームとパンを行うことができますが、グラフの更新を再開するときはいつでも、ズーム レベルを変更せずに最も古いデータにスクロールするだけです。
最終結果はかなり堅実で、Holo_Light と Holo_Dark の両方で見栄えが良いと思います。
答えてくれたダンと、エンジンを作成した他のすべての開発者に感謝します。
ハッピーコーディング！