Googleシートからのデータを使用したインタラクティブなJavaScriptチャート

キーテイクアウト

• インタラクティブなJavaScriptチャートは、Googleシートのデータを使用して作成でき、スプレッドシートデータに変更が加えられるたびに動的更新を提供します。
プロセスには、GoogleシートからJSONとしてデータをエクスポートし、AJAXを介してこのデータを取得し、必要な形式と一致するようにデータを再構築し、FusionChartsなどのツールを使用してチャートを作成し、特定のニーズに合わせてチャートをカスタマイズすることが含まれます。 >
• FusionChartsは、JSONデータをラベルキーとバリューキーを含むオブジェクトの配列として受け入れ、チャートはタイプ、高さ、幅、ラベル、およびデータソースの観点からカスタマイズできます。
Googleシートは便利でアクセス可能なデータソースですが、他のソースをJavaScriptチャートの作成にも使用することもでき、データはポーリングメカニズムでリアルタイムで更新できます。
• この記事は、ジェフ・スミスによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！
私の友達のジェニーに会います。彼女は最近、ウェブサイトのコーディングを開始しました。彼女は自分の仕事を愛し、スティーブに会うまでとても幸せでした。スティーブは、非常に安心しているクライアントではないという評判を持っています。

スティーブにはスプレッドシートに多くのデータがあり、彼はそれを彼のウェブサイトに表示したかったのです。私たちの友人（今はジェニーもあなたの友人です！）は、スティーブがエクセルでチャートを作成し、それらをウェブサイトに画像としてアップロードすることを提案しました。

しかし、スティーブはスティーブであるため、チャートがインタラクティブになることを望んでいました。それだけでなく、彼はまた、スプレッドシートのデータを変更したときはいつでもチャートを更新することを望んでいました。 ジェニーはこの問題に取り組む方法を知らなかったので、彼女は私のところに来ました。そして、私が良い友達であるため、私は彼女にこのアドバイスを与えました：

最初に、クライアントにデータをGoogleシートに移動するように依頼します（これが、すべてのクールな人が最近行っていることだからです）。その後、彼が必要とする機能を簡単に実装できます - インタラクティブなJavaScriptチャートと動的更新。

彼女のクライアントは（幸運にも！）同意し、ジェニーと私は残りのソリューションをコーディングしました。しかし、どうですか？まあ、それがこのチュートリアルがあなたに教えることです。

このチュートリアルを5つのわかりやすい手順に分割しました：

Googleシートからのデータのエクスポート

ajax

経由でGoogleシートからJSONを取得します

データの再構築

FusionChartsを使用してチャートを作成します

チャートのカスタマイズ

それでは、それ以上のADOなしで、！
1. に飛び込んでみましょう
GoogleシートデータをJSON
2. としてエクスポートします
データのエクスポート方法を掘り下げる前に、最初にシートを作成しましょう。 Googleアカウントを持っていると仮定すると、Googleシートページに移動して
3. 新しいスプレッドシート
ボタンを開始することでこれを行うことができます。開くスプレッドシートでは、2つの列を作成します。次に、新しく作成されたシートにいくつかのデータを入力します。私はここから私のものを取りました：2015年に世界最高の賃金俳優。

ご覧のとおり、左の列にはチャートのラベルが含まれています。右側のラベルには、それらのラベルに対応しています。自宅でフォローしている人のために、このシートのコピーをこちらから入手できます（ファイルに移動してください>コピーを作成してください）。

Googleシートで利用可能なデータは、JSON、XMLなどの複数の形式にエクスポートできます。これらの形式のいずれかにエクスポートすると、Webから簡単にアクセスできます。

ドキュメントをWebに開くには、ドキュメント設定に次の変更を加える必要があります。

ドキュメントの共有をWeb上の

publicに設定します

、または
• リンクを持っている。これを達成するには、右上隅の共有ボタンをクリックし、ポップアップの右下に表示される[🎜]オプションをクリックします。 ドキュメントをWebに公開します。このオプションは、ファイル>でWebに公開されています
• でご利用いただけます これらの2つの変更が行われた場合、ドキュメント内のデータはhttps：//spreadsheets.google.com/feeds/list/spreadsheet/od6/public/basic?alt=json スプレッドシートをGoogleシートのIDに置き換える必要があります。この場合、1AOZ_GCPYOEIMMND1N_MEYNOP8TJ0FCXPP1AOUHCPWZOです。ここで結果を見ることができます。 jQueryを使用してGoogleシートからJSONをフェッチします

jQueryのget（）メソッドを使用して、Googleシートからデータを取得します。示されているように、cdnからjqueryを含めることができます：

タグが追加された状態で、作成したスプレッドシートURLで$ .getを呼び出します。

上記のjQueryコードは、GoogleシートURLにAJAX要求を行い、データを正常に取得すると、成功関数を呼び出します。この関数は、サーバーからコンソールに返されるデータをログに記録します。このスクリプトを実行して、返されるものを正確に調べるために少し時間を取ってください。

データの再構築

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></span>></span>
</span>

GoogleシートからのJSONデータは、視覚化ライブラリが受け入れたデータ形式に一致するために少し再構築する必要があります。このチュートリアルでは、FusionChartsを使用します

FusionChartsは、JSONデータをラベルキーとバリューキーを含むオブジェクトの配列として受け入れます。これがどのように見えるかです：

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

これを達成するには、以前に定義したjQuery get関数の成功のコールバックで次のコードを実行する必要があります。

ここで私たちがしていることは、応答に存在する各Googleシートデータオブジェクトを反復することです。次に、チャートで使用される新しい配列parseddataにそれらを保存します。

ラベルはタイトルで利用できます。$ tキーと値はコンテンツで使用できます。$ tキーのキー。値にはシート列名が含まれていますが、これは必要ありません。したがって、剥がします。 Googleシートの残りのデータは、視覚化には必要ありません。

ParsedDataアレイには、FusionChartsが理解する形式のデータが含まれており、視覚化の作成を続けることができます。

ステップ3：チャートの作成

データの準備ができてアクセス可能な状態で、チャートの作成に進むことができます。チャートの作成には、次の手順が含まれます

チャートがレンダリングされる

の作成。 Googleシートから解析されたデータを使用してFusionChartsインスタンスを作成します。

FusionChartsインスタンスでレンダリングメソッドを呼び出して、div。
• でレンダリングします。
• マークアップでは、CDNを介してFusionChartsライブラリを含めます。
• およびチャートの要素を含む。これには、チャートがレンダリングされる前に表示される場所ホルダーテキストを含めることができます。

基本的な水平バーチャートを実際に作成して＃チャートコンテインにレンダリングするには、次のコードをサクセスコールバックに追加します。

チャートに定義した構成オプションのいくつかを見てみましょう。

<span><span><span><script> type<span >="text/javascript"</script></span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></span>></span>
</span>

タイプ：プロットするチャートタイプを定義します - この例ではbar2d。

高さ：ピクセルのチャートの高さ。

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

幅：チャートの幅。

<span>[{
</span>  <span>"label": "Robert Downey Jr.",
</span>  <span>"value": "80"
</span><span>}
</span><span>...]
</span>

チャート：ここでは、タイトル、両方の軸のラベル、値のプレフィックスなどを設定できます。

データ：チャートが構築されます。

• そして、これまでに持っているもののデモです：
• codepenでSitePoint（@sitepoint）でペンJavaScriptチャートをグーグルシートを参照してください。
チャートのカスタマイズ
上記のデモが機能している間、おそらく少し一般的に見えます。幸いなことに、チャートの外観のほぼすべての側面をカスタマイズできます。 FusionChartsにはいくつかの優れたドキュメントがあります。これをチェックすることをお勧めします。
• もう少し見えるようにカスタマイズされた同じチャートです。
codepenのSitePoint（@SitePoint）でペンJavaScriptチャートGoogleシート（2）を参照してください。
• 結論

あなたが見たように、Googleシートからライブチャートを作成することはそれほど難しくありません。ライブJavaScriptチャートは、複雑なチャートタイプなど、マルチシリーズチャートについても生成することもできます。複雑なチャートで解決する必要がある唯一のことは、Googleシートからチャートで受け入れられた形式にデータを再構築する方法です。他のすべては同じままです。

• Googleシートデータの操作方法の詳細については、Googleのドキュメントをチェックしてください。
このチュートリアルには基本的なバーチャートを使用しましたが、何か違うものが必要な場合は、ここでさまざまなチャートタイプをご覧ください。
PS：下のコメントセクションでぶらぶらしているので、このチュートリアルについてご質問をお気軽に撮影してください。喜んで助けてくれます！

グーグルシートからのデータを使用したインタラクティブなJavaScriptチャートに関するよくある質問（FAQ） Googleシートからのデータを使用してインタラクティブなJavaScriptチャートを作成するにはどうすればよいですか？ Googleシートからのデータを使用してインタラクティブJavaScriptチャートを作成するには、いくつかのステップが含まれます。まず、GoogleシートAPIをセットアップする必要があります。これには、Google Cloudコンソールに新しいプロジェクトを作成し、Sheets APIを有効にし、資格情報を作成することが含まれます。 APIキーを取得したら、Googleシートデータにアクセスするために使用できます。次に、JavaScriptを使用してチャートを作成する必要があります。これには、chart.js、highcharts、Googleチャートなど、いくつかのライブラリがあります。これらのライブラリを使用して、バーチャート、ラインチャート、パイチャートなど、さまざまなチャートタイプを作成できます。最後に、チャートをGoogleシートデータに接続する必要があります。これには、APIキーを使用してGoogleシートからデータを取得し、チャートライブラリが理解できる形式にデータを解析し、データを使用してチャートを更新します。 Googleシートからのデータを使用したチャート

Googleシートからのデータを使用してインタラクティブなJavaScriptチャートを作成する際のいくつかの一般的な問題には、APIキーの問題、データの取得に関する問題、データの解析の問題が含まれます。 APIキーが正しくセットアップされていない場合、Googleシートデータにアクセスできない場合があります。データの取得に問題がある場合は、Google Sheets APIのネットワークの問題や問題が原因である可能性があります。データを解析するのに問題がある場合、それはデータがチャートライブラリが理解できない形式であるためかもしれません。これらの問題を解決するには、APIキーを確認し、ネットワーク接続をテストし、データが互換性のある形式であることを確認してください。 >

はい、JavaScriptチャートにはGoogleシート以外のデータソースを使用できます。 chart.js、highcharts、Googleチャートなどのほとんどのチャートライブラリは、JSON、CSV、XMLなど、さまざまな形式でデータを受け入れることができます。データベース、API、ローカルファイルなど、さまざまなソースからこのデータを取得できます。ただし、Googleシートをデータソースとして使用するには、簡単なセットアップ、リアルタイムの更新、データを共有およびコラボレーションする機能など、いくつかの利点があります。

Googleシートからのデータを使用してJavaScriptチャートをリアルタイムで更新するにはどうすればよいですか？

Googleシートのデータを使用してJavaScriptチャートをリアルタイムで更新するには、ポーリングメカニズムを設定する必要があります。これには、Googleシートからデータを定期的に取得し、新しいデータでチャートを更新することが含まれます。これは、JavaScriptのSetInterval関数を使用して行うことができます。これにより、指定された間隔で関数を実行できます。関数では、Googleシートからデータを取得し、チャートライブラリが理解できる形式に解析し、新しいデータでチャートを更新します。 ？

はい、インタラクティブなJavaScriptチャートを他の人と共有できます。 chart.js、highcharts、Googleチャートを含むほとんどのチャートライブラリを使用すると、画像またはPDFとしてチャートをエクスポートできます。その後、このファイルを他の人と共有できます。または、チャートがWebページでホストされている場合は、ページのURLを単純に共有できます。 Googleシートをデータソースとして使用している場合は、Googleシートドキュメントを他の人と共有して、データを表示および編集できるようにすることもできます。 >

チャートライブラリが提供するオプションを使用して、JavaScriptチャートの外観をカスタマイズできます。 Chart.JS、HighCharts、Googleチャートなどのほとんどのチャートライブラリを使用すると、色、フォント、ラベル、ツールチップなど、チャートのさまざまな側面をカスタマイズできます。また、ズームやパンニング、アニメーションなどのインタラクティブな機能を追加することもできます。チャートライブラリによって。 chart.js、highcharts、Googleチャートなどのほとんどのチャートライブラリを使用すると、ツールチップ、ズーム、パンニング、アニメーションなどのインタラクティブな機能を追加できます。また、イベントリスナーをチャートに追加することもできます。データポイントをクリックするなど、ユーザーが特定の方法でチャートと対話するときに関数を実行できます。 APP？

​​

はい、モバイルアプリでJavaScriptチャートを使用できます。 chart.js、highcharts、Googleチャートを含むほとんどのチャートライブラリは、モバイルデバイスと互換性があります。ただし、チャートが小さな画面に正しく表示されるように調整する必要がある場合があります。これには、チャートのサイズ、要素のレイアウト、タッチの相互作用を調整することが含まれます。 Webブラウザで開発者ツールを使用したチャート。これらのツールを使用すると、チャートの要素を検査し、コンソールログを表示し、JavaScriptコードを踏み出すことができます。 Googleシートデータに問題がある場合は、Google Sheets API Explorerを使用してAPIリクエストをテストすることもできます。

javascriptチャートのパフォーマンスを最適化するにはどうすればよいですか？

Googleシートから取得したデータの量を最小限に抑え、JavaScriptコードの最適化、パフォーマンスの使用により、JavaScriptチャートのパフォーマンスを最適化できます。チャートライブラリの機能。大量のデータを取得すると、チャートが遅くなる可能性があるため、必要なデータのみを取得してください。不要な計算を回避し、効率的なアルゴリズムを使用することにより、JavaScriptコードを最適化することもできます。 chart.js、highcharts、Googleチャートを含むほとんどのチャートライブラリも、怠zyなロードやハードウェアアクセラレーションなどのパフォーマンス機能を提供します。

以上がGoogleシートからのデータを使用したインタラクティブなJavaScriptチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。