レスポンシブな React Native Echarts コンポーネントの概要
この記事では、主にレスポンシブな React Native Echarts コンポーネントの導入について紹介します。これは、必要な友人に参考にしていただけるように共有します。需要の増大に伴い、MPAndroidChart のような従来のチャート ライブラリでは、プロダクト マネージャーのますます異常なニーズに対応できなくなりました。フロントエンド分野でのデータ視覚化の開発は比較的盛んですが、WebView を介してモバイル端末上で Echarts のような強力なフロントエンド データ視覚化ライブラリを使用することは、問題を解決する良い方法です。
React Native 開発では、フロントエンドと同じ JavaScript 言語が使用されるため、Echart の接続作業は比較的スムーズですが、必要なコンポーネントのカプセル化によって開発効率が大幅に向上します。
Echarts は、サードパーティのパッケージ化ライブラリ、react-native-echarts を公式に推奨しています (注: 対応する nmp パッケージ名は、native-echarts です)。現在、スターが 400 個以上、毎週 100 個以上のダウンロードがあり、まだその勢いが衰えていないことがわかります。広く使われています。しかし、調査の結果、react-native-echarts には以下の問題があることが分かりました:
- ライブラリが半年以上更新されていない、Echarts のバージョンが 3.0 のままになっている、手動で追加する問題Android 側のパッケージ化のアセットは解決されていません
- ライブラリのインターフェイスの柔軟性が低く、たとえば、サイズは幅と高さによってのみ設定できます。Echarts 拡張パッケージはイベント登録、WebView 通信を使用できません。 、などは実行できません
- WebViewを使用してEchartsをカプセル化するため、ローカルHTMLが関与するため、純粋なJavaScriptではありません言語レベルの関数があり、ネイティブコードがないため、nmpパッケージにすることは良い選択ではありません。プロジェクトの内部コンポーネントとして記述し、自分で構成する方が、より便利で柔軟なソリューションです。
そこで、サードパーティの Echarts パッケージ化ライブラリを使用せず、ユニバーサル コンポーネントの WebChart を自分たちで作成することにしました。開発中の使用を容易にするために、このコンポーネントには次の特徴があります:
- は、オプションでデータ ソースを設定するだけで、データが変更された後に自動的に更新されます。 React スタイルに沿って。
-
私たちの解決策は、コンポーネントが更新されるたびに受信オプションパラメータが変更されたかどうかを判断し、変更された場合は webView.postMessage を渡し、新しいオプションを JSON 形式で渡して Echarts に setOption を再度通知します。
Echarts 自体がオプションを比較しますが、事前判断により、更新によって引き起こされる WebView との頻繁な通信が削減されます。これは、WebView 内で多数の非同期リクエストがある場合に明らかであり、更新では Echarts 独自の setOption が使用されます。 WebView 全体を再読み込みすることなく
WebView の postMessage インターフェイスと onMessage インターフェイスを使用すると、チャートと他の React Native コンポーネント間のイベント通信を実現できます - コンポーネントの exScript パラメータを通じて、任意のスクリプトを WebView に追加できます柔軟に使えます
- 自作コンポーネントなので、echartsのバージョン、拡張パック、svg/canvas、データの増分読み込みも全て自分で設定可能です
- デモと使用方法
使用法と例については、react-native-echarts-demo を参照してください。直接使用する必要がある場合は、次の手順に従って移植できます:
- ルート ディレクトリの WebChart コンポーネント フォルダーを適切な場所にコピーします。プロジェクトに配置します
- /android/app/src/main をコピーします /assets/web フォルダーをプロジェクトと同じ場所にコピーします 手動で作成する必要があるアセット フォルダーはありません。
- プロジェクトで WebChart コンポーネントを使用するには、上記の 2 つの手順のみが必要です。
さらにカスタマイズが必要な場合は、Echarts コードは上記の 2 つのフォルダーの タグにあります。現在、拡張パックなしの 4.0 フル バージョンをダウンロードできます。公式 Web サイトのバージョンと拡張パッケージの置き換え、svg/canvas、増分データの読み込みなどは WebChart/index.js で直接変更できます。モバイル側では、パフォーマンス上の理由から、通常は svg レンダリング モードを使用します。
WebChartの具体的な使い方については、App.jsを参照してください。スタイル設定は通常のReact Nativeコンポーネントと同じです。flexを使用することも、固定値に設定することもできます。 3 つの追加パラメーター:
- option(object): setOption に割り当てられたパラメーター オブジェクト。変更後、WebChart は応答性の高い更新を実現するために内部で setOption を自動的に呼び出します。 JSON の解析中に関数が処理されないことに特に注意してください。そのため、関数フォーマッタやクラスベースの LinearGradient の使用を避ける必要があります。デモ
- exScript(string) のような通常のオブジェクトを使用してください。 WebView のロード時に実行されるコードは、通常、テンプレート リテラルを使用することをお勧めします
- onMessage(function): WebView は、postMessage の後に最初にグラフ通信にコールバックを設定する必要があります。他の React Native コンポーネントとの併用
- もちろん、これらはビジネス ニーズに基づいて設計されたパラメータであり、完全に自由にリセットできます。
Echarts と React Native コンポーネント間の通信
React Native の WebView コンポーネントでは、HTML とコンポーネント間の双方向通信のために onMessage と postMessage が提供されています。具体的な使用方法についてはドキュメントを参照してください。
webView.postMessage を使用して、WebChart は Echarts に setOption を実行するように通知します。exScript では、window.postMessage を使用して Echarts イベントを React Native コンポーネントに伝達できます。
一般に、通信データが次の形式のオブジェクトであることに同意します:
{
type: 'someType',
payload: {
value: 111,
},
}onMessage と postMessage は文字列のみを転送できるため、exScript では次のような JSON シリアル化が必要です:
exScript={`
chart.on('click', (params) => {
if(params.componentType === 'series') {
window.postMessage(JSON.stringify({
type: 'select',
payload: {
index: params.dataIndex,
},
}));
}
});
`}上記は、カプセル化された応答 WebChart です。コンポーネントと使用法、完全なコードについては、react-native-echarts-demo を参照してください。
使用中には、まだいくつかの未解決の落とし穴があり、現時点では回避することしかできません。知っている学生は私を修正することを歓迎します:
IOS では、Echarts は透明効果と色をレンダリングできないようです。 rgbaでの設定は通常できません
React NativeのWebViewには無効なstyle.height属性があるようなので、Viewの外側に設定する必要があります
現在のリソースロード方法によれば、indexのコピーが2つ存在します。 Androidではhtml。プラットフォームは実行時に判断されるため、index.anroid.jsとindex.ios.jsを別々に設定してもパッケージ化されるため、アセットは手動で追加する必要があります
index.htmlにインライン化する必要があります。 Echarts のコード、別の js ファイルへの外部参照は無効のようです
以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHPの中国語サイトです！
関連する推奨事項:
以上がレスポンシブな React Native Echarts コンポーネントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7490
15
1377
52
77
11
19
41
PHPインターフェイスとEChartsを使用して視覚的な統計グラフを生成する方法
Dec 18, 2023 am 11:39 AM
データの視覚化がますます重要になっている今日の状況において、多くの開発者は、さまざまなツールを使用してさまざまなチャートやレポートを迅速に生成し、データをより適切に表示し、意思決定者が迅速な判断を下せるようにしたいと考えています。この文脈では、Php インターフェイスと ECharts ライブラリを使用すると、多くの開発者が視覚的な統計グラフを迅速に生成するのに役立ちます。この記事では、Php インターフェイスと ECharts ライブラリを使用して視覚的な統計グラフを生成する方法を詳しく紹介します。具体的な実装ではMySQLを使用します。
ECharts と Python インターフェイスを使用してダッシュボードを描画する手順
Dec 18, 2023 am 08:40 AM
ECharts と Python インターフェイスを使用してダッシュボードを描画する手順には、特定のコード サンプルが必要です 概要: ECharts は、Python インターフェイスを通じてデータ処理とグラフィック描画を簡単に実行できる優れたデータ視覚化ツールです。この記事では、ECharts と Python インターフェイスを使用してダッシュボードを描画する具体的な手順とサンプル コードを紹介します。キーワード: ECharts、Python インターフェイス、ダッシュボード、データ視覚化 はじめに ダッシュボードは、データ視覚化の一般的に使用される形式であり、
マップ ヒート マップを使用して ECharts で都市の熱を表示する方法
Dec 18, 2023 pm 04:00 PM
マップ ヒート マップを使用して ECharts で都市熱を表示する方法 ECharts は、マップ ヒート マップなど、開発者が使用できるさまざまなチャート タイプを提供する強力なビジュアル チャート ライブラリです。マップ ヒート マップを使用すると、都市や地域の人気を示すことができ、さまざまな場所の人気や密度を迅速に把握するのに役立ちます。この記事では、ECharts でマップ ヒート マップを使用して都市の熱を表示する方法を紹介し、参考となるコード例を示します。まず、地理情報を含むマップ ファイル、EC が必要です。
カレンダー チャートを使用して ECharts に時間データを表示する方法
Dec 18, 2023 am 08:52 AM
カレンダー チャートを使用して ECharts で時間データを表示する方法 ECharts (Baidu のオープン ソース JavaScript チャート ライブラリ) は、強力で使いやすいデータ視覚化ツールです。折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフが提供されています。カレンダー チャートは、ECharts の非常に特徴的で実用的なチャート タイプであり、時間関連のデータを表示するために使用できます。この記事では、ECharts でカレンダー チャートを使用する方法を紹介し、具体的なコード例を示します。まず、使用する必要があります
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
ECharts と PHP インターフェイスを使用して統計グラフを生成する方法
Dec 18, 2023 pm 01:47 PM
ECharts と PHP インターフェイスを使用して統計グラフを生成する方法 はじめに: 最新の Web アプリケーション開発において、データの視覚化は非常に重要なリンクであり、データを直観的に表示および分析するのに役立ちます。 ECharts は、強力なオープンソースの JavaScript チャート ライブラリであり、さまざまなチャート タイプと豊富なインタラクティブ機能を提供し、さまざまな統計チャートを簡単に生成できます。この記事では、ECharts と PHP インターフェイスを使用して統計グラフを生成する方法と、具体的なコード例を紹介します。 1. EChaの概要
ECharts は jQuery に依存しますか?徹底した分析
Feb 27, 2024 am 08:39 AM
ECharts は jQuery に依存する必要がありますか?詳細な解釈には、特定のコード例が必要です。ECharts は、豊富なチャート タイプと対話型関数を提供する優れたデータ視覚化ライブラリであり、Web 開発で広く使用されています。 ECharts を使用するとき、多くの人は「ECharts は jQuery に依存する必要があるのか?」という疑問を持つでしょう。この記事ではこれについて詳しく説明し、具体的なコード例を示します。まず、明確にしておきたいのですが、ECharts 自体は jQuery に依存しません。
ヒストグラムを使用して ECharts にデータを表示する方法
Dec 18, 2023 pm 02:21 PM
ヒストグラムを使用して ECharts でデータを表示する方法 ECharts は、データ視覚化の分野で非常に人気があり、広く使用されている JavaScript ベースのデータ視覚化ライブラリです。その中でも、ヒストグラムは最も一般的でよく使用されるグラフの種類であり、さまざまな数値データの大きさ、比較、傾向分析を表示するために使用できます。この記事では、ECharts を使用してヒストグラムを描画する方法とコード例を紹介します。まず、ECharts ライブラリを HTML ファイルに導入する必要があります。これは次の方法で導入できます。
