DUICUO

現在の場所： ホーム > 記事 > HarmonyOS オープンソースサードパーティコンポーネント - MPAndroidChart_ohos チャート描画コンポーネント

HarmonyOS オープンソースサードパーティコンポーネント - MPAndroidChart_ohos チャート描画コンポーネント

[[394416]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com

序文

このコンポーネントは、Androidのチャート描画コンポーネントMPAndroidChart（https://github.com/PhilJay/MPAndroidChart）をベースにしており、HarmonyOSへの移行とコア機能のリファクタリングを実装しています。コードは現在オープンソースです（https://gitee.com/isrc_ohos/mpandroid-chart_ohos）。ぜひダウンロードしてご利用いただき、貴重なフィードバックをお寄せください。

背景

Android版MPAndroidChartは、GitHubで33,000以上のスターと8,300以上のフォークを誇り、おそらく最も広く利用され、最もパフォーマンスの高いオープンソースのチャートライブラリと言えるでしょう。折れ線グラフ、円グラフ、レーダーチャートなど、様々なグラフを作成できます。ユーザーは独自のデータインターフェースを記述するだけで、美しくレンダリングされた様々なデータ曲線を生成でき、ほとんどのビジネスアプリケーションのニーズをある程度満たすことができます。

このコンポーネントは、MPAndroidChart の HarmonyOS ベースのバージョンであり、MPAndroidChart_ohos と呼ばれ、そのコア機能を実装します。

コンポーネント効果表示

現在、MPAndroidChart_ohos は折れ線グラフとヒストグラムの両方をサポートしています。以下では、折れ線グラフとヒストグラムのレンダリング効果を示します。

1. 折れ線グラフ

図1はランダムデータから生成された折れ線グラフを示しています。MPAndroidChart_ohosはオリジナルのMPAndroidChartの優れた機能を継承し、次のような様々なユーザー定義インターフェースを提供しています。

(1) カスタマイズ可能なX軸とY軸。ユーザーはX軸とY軸の位置をカスタマイズできます。例えば、このサンプルでは、​​左側のY軸と上部のX軸が描画されています。

（2）カスタマイズ可能なガイドライン。ガイドライン（またはグリッド線）を表示するかどうかを選択したり、ガイドラインの位置を自由に設定したりできます。

（3）チャートの拡張。ユーザーはチャート曲線のさまざまな属性（色、太さなど）を設定し、曲線で囲まれた領域を塗りつぶすことができます。

図1. 折れ線グラフの描画効果

2. ヒストグラム

図2は、「2020年1月1日から15日までの小規模店舗の収益」という仮想シナリオに基づいたチャートです。このシナリオを説明するために、MPAndroidChart_ohosを使用してヒストグラムを作成しました。

図2. ヒストグラム描画効果

サンプル分析

図3 サンプルエンジニアリング構造

図 1 と 2 は主にライブラリ内の機能を呼び出すことによって描画されますが、サンプル内の実装は主に図 3 の赤いボックスで示される 2 つのファイルによって完了します。

ユーザーがチャートを作成したい場合は、次の手順を実行するだけです。

（1）チャートの種類を選択します。

（２）プロパティを設定します。

（３）データをインポートする。

1. チャートの種類を選択する

MPAndroidChart_ohos は折れ線グラフやヒストグラムを描画する機能を提供します。ユーザーはニーズに応じて必要な機能を選択するだけです。

  1.  LineChart chart = new LineChart(context); // 折れ線グラフを初期化する
  2. BarChart chart = new BarChart(context); // ヒストグラムの初期化
  3. 1.

2. プロパティを設定する

MPAndroidChart_ohosは、チャートのスタイルをカスタマイズする機能を提供します。ユーザーは、ライブラリによって公開されているインターフェースを呼び出すことで、チャートのさまざまな属性を追加、変更、削除できます。例えば、軸をカスタマイズしたい場合は、XAxisクラスのオブジェクトをインスタンス化し、そのオブジェクトのさまざまなメソッドを使用してX軸の色を変更したり、最大値と最小値などを設定したりできます。

  1.  XAxis xAxis = chart.getXAxis(); // インスタンス化
  2. xAxis.setAxisMaximum(20f); //プロパティを設定する
  3. xAxis.setAxisMinimum(0f);
  4.  xAxis.setAxisLineColor(Color.BLACK.getValue());
  5.  1.

軸の設定に加えて、チャートに様々な補助線を追加することもできます。例えば、x = 2 に補助線を追加したい場合は、LimitLine クラスのオブジェクトをインスタンス化し、そのオブジェクトの様々なメソッドを使って補助線の幅、ラベルの位置、テキストサイズなどを変更できます。

  1.  LimitLine llXAxis = new LimitLine(2f, "補助線:x=2" ); // インスタンス化
  2. llXAxis.setLineWidth(4f); // プロパティ設定
  3. llXAxis.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);
  4.  llXAxis.setTextSize(10f);
  5.  llXAxis.setTypeface( Font.DEFAULT );

3. データのインポート

MPAndroidChart_ohosでは、チャートの種類によってデータクラスが異なります。例えば、折れ線グラフのデータクラスはLineData、ヒストグラムのデータクラスはBarDataです。なぜ単純なint[]やfloat[]をデータクラスとして使えないのでしょうか？これは、MPAndroidChart_ohosでは、データクラスの役割がデータの保持だけでなく、曲線の色、太さ、データポイントの色、サイズなど、チャート関連の属性も保持するためです。この意図については、後述のライブラリ分析で説明します。

折れ線グラフを例にとると、データをインポートするプロセスは次のようになります。

（1）LineDataSetクラスを作成する。

  1.  LineDataSet set1 = new LineDataSet(値, ラベル);

ここで、valuesはユーザーが描画したいデータのタイプ（通常はfloat[]）であり、labelはこのタイプのデータのラベルです。

（２）１つ以上の種類のデータをArrayListに格納する

  1. ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add ( set1);

（3）ArrayListをLineDataデータクラスにしてチャートに渡します。

  1.  LineData データ = 新しい LineData(dataSets);
  2.  chart.setData(データ);

ライブラリ分析

1. 工学構造の比較

図4 MPAndroidChart_ohos（上）とMPAndroidChart（下）のプロジェクト構造の比較

図4の2つの図を比較するとわかるように、MPAndroidChart_ohosはMPAndroidChartプロジェクトの構造に従って開発され、その主要機能を実装しています。MPAndroidChartと比較すると、MPAndroidChart_ohosには例外フォルダ、ハイライトフォルダ、ジョブフォルダがありませんが、主要機能の使用には影響しません。

2. マルチデバイス互換性

マルチデバイス互換性を高めるため、MPAndroidChart は内部的に dp（密度非依存ピクセル）を単位としてチャート内の各コンポーネントの相対位置を計算します。チャートを描画する際には、dp データがピクセルデータに一律に変換されるため、この処理中にシステムが何らかの表示情報を提供する必要があります。Android では、この情報は DisplayMetrics によって提供され、以下のコードでコンテキストを通じて DisplayMetrics を取得できます。

  1. リソース res = context.getResources();
  2.  mMetrics = res.getDisplayMetrics();

次に、DisplayMetrics を使用して画面の DPI を取得します。dp * DPI は画面のピクセル数に等しくなります。

  1. 公共 静的  float convertDpToPixel( float dp) {
  2.  dp * mMetrics.densityを返します。
  3.  }

HarmonyOSシステムでは、ディスプレイ情報はDisplayAttributeクラスを通じて取得されます。以下のコードでDisplayAttributeを取得できます。

  1. ディスプレイ display = DisplayManager.getInstance().getDefaultDisplay(this.getContext()).get();
  2. ディスプレイ属性 ディスプレイ属性 = display.getAttributes()

Androidと比べていくつか違いがあることが分かります。DisplayAttributeを取得すると、画面のDPIを取得できます。DPIを表すインターフェースがAndroidとは異なる点に注意してください。

  1. 公共 静的  float convertDpToPixel( float dp) {
  2.  dp * mMetrics.densityPixelsを返します。
  3.  }

3. 軸の描画

軸はグラフの基準となるものです。MPAndroidChartでは、軸はグラフの種類を分類する基準としても機能します。MPAndroidChartは10種類以上のグラフ描画機能を提供しているように見えますが、実際にはこれらの10種類以上のグラフは、直交座標系と極座標系の2つの軸に基づいています。

MPAndroidChart は、直交座標系で折れ線グラフ、散布図、ヒストグラム、バブル チャート、ローソク足チャートなどを実装します。

MPAndroidChart は、極座標で円グラフとレーダー チャートを実装します。

MPAndroidChart_ohos では、軸に関連するクラスは主に components フォルダーと renderer フォルダーにあります。

図5. 軸クラスと軸描画クラス

AxisBase クラスは、主に軸の色、太さ、位置、スケール、ラベル、極値などの属性を定義します。XAxis と YAxis は AxisBase を継承し、それぞれ X 軸と Y 軸の属性を定義します。例えば、X 軸の位置属性は「Top」、「BOTTOM」、「TOP_INSIDE」、「BOTTOM_INSIDE」、「BOTH_SIDED」のいずれかに設定する必要があります。一方、Y 軸の位置属性は X 軸とは異なり、「LEFT」または「RIGHT」に設定する必要があります。

`AxisRenderer` クラスは、軸を描画するための基本クラスです。軸、ラベル、ガイドライン、グリッドポイントを描画するための各種ペイントや対応するメソッドインターフェースなど、軸描画に必要なプロパティとメソッドを定義します。`XAxisRenderer` と `YAxisRenderer` は `AxisRenderer` を継承し、その描画インターフェースを実装することで、実際に軸を描画します。`XAxisRenderHorizo​​ntalBarChart` などの他のクラスは、特殊なチャートに軸を描画するために使用されます。

4. データのプロット

図6. 折れ線グラフに関連するデータクラス

サンプル分析では、チャートの種類によって、データと属性を保持するためのデータクラスが異なることが示されています。データクラスの継承関係は、MPAndroidChartにおいて比較的複雑な部分です。例えば、折れ線グラフを描画するために必要なLineDataクラスは、以下のクラスを継承しています。

  1. パブリッククラス LineData は BarLineScatterCandleBubbleData<ILineDataSet> を拡張します {

クラス名は少し長いですが、問題ありません。検索を続けましょう。

  1. パブリック抽象クラス BarLineScatterCandleBubbleData<T は IBarLineScatterCandleBubbleDataSet<? extends Entry>> を拡張し、ChartData<T> を拡張します {
  2.  1.

ChartData クラスはルート クラスである必要があります。

  1. パブリック抽象クラス ChartData<T extends IDataSet<? extends Entry>> {

3階層の継承階層は小さいように思えるかもしれませんが、実装が必要なインターフェースとジェネリックパラメータの数の多さには注目すべきです。これらのインターフェースとジェネリックは複数の階層にネストされていることが多く、移植プロセスを大幅に複雑化させます。では、これらのデータクラスの機能を見ていきましょう。

ChartDataクラスは、データクラスの基本クラスです。このクラスはまず、データの上限と下限を定義し、浮動小数点数が表現できる最大値と最小値を表します。また、このクラスはデータ処理メソッドも提供します。例えば、数値が上限または下限を超えた場合、オーバーフローによるデータエラーを防ぐため、値をそれらの境界に強制的に割り当てます。さらに、このクラスは、データポイントの数、X値とY値のクエリ、ラベルのクエリ、最大値と最小値のクエリなどのデータクエリメソッドも提供します。

BarLineScatterCandleBubbleDataとLineDataは、それぞれChartDataの1番目と2番目のラッパーです。これら自体はメソッドを追加せず、インターフェースと様々なジェネリックパラメータを実装することで、格納されるデータ形式を制限するだけです。

図7. 折れ線グラフを描画するクラス

では、データポイントと曲線はどのようにしてチャート上に描画されるのでしょうか？DataRendererはデータレンダリングの基本クラスであり、データ、曲線、ラベルなどを描画するための抽象メソッドを含んでいます。折れ線グラフの例を続けると、これらの抽象メソッドは継承パスに沿って段階的に実装されます。DataRenderer → BarLineScatterCandleBubbleRenderer → LineScatterCandleRadarRenderer → LineRadarRenderer → LineChartRendererです。最終的に、LineChartRendererは折れ線グラフを描画するためのすべての機能を実装します。

プロジェクト貢献者

ウー・シェンヤオ、ジェン・センウェン、ジュー・ウェイ、チェン・メイルー、チャン・シンシン

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com

ラベル

関連するおすすめ記事

ランダムにおすすめされた記事

人気のタグ