DevToolsコンソールの出力を確認(rèn)するために、コードの最後の行を追加しました。コンソールのログは次のとおりです。

完璧！私たちのテーブルヘッダーは変數(shù)になり、テーブルセルの內(nèi)容にマップします。

殘っているのは、年度のラベルと販売価値を配列（chart.jsのデータオブジェクトに配列が必要）にマッピングされ、データをチャート関數(shù)に渡すことです。

このスクリプトは、JSON値を數(shù)年の配列にマッピングします。前の関數(shù)の直後に追加できます。

 //マップjson値はラベルアレイvarラベル= json.map（function（e）{{
  e.yearを返します。
}）;
console.log（ラベル）; // ["2016"、 "2017"、 "2018"、 "2019"]]

//マップjson値は値アレイvar値に戻ります= json.map（function（e）{
  e.itemssoldを返します。
}）;
console.log（values）; // ["10"、 "25"、 "55"、 "120"]]

// buildChart関數(shù)を呼び出し、チャートをレンダリングvar chart = buildChart（ラベル、値、「前の販売」）;

それでおしまい！チャートデータが抽出され、JavaScriptの視覚化に渡され、レンダリングされました。

（...チャートのレンダリング結(jié)果はここに挿入する必要がありますが、直接レンダリングできないため、省略されています...）

データソース2：リアルタイムAPI

世界には多くの公共のAPIがあり、その多くには多くの有用なデータが含まれています。 APIの1つを使用して、チャートをリアルタイムデータに入力する方法を示しましょう。 Forbes 400 Rich List APIを使用して、世界で最も裕福な人々のウェルスランキングを引き出します。わかっていますね。 ！私は常にウェルスランキングが興味深いと感じており、このAPIはより多くのデータを提供します。ただし、純粋なJavaScriptを使用して、名前とリアルタイムの純資産を含むチャートを表示するデータをリクエストします！

まず、チャート関數(shù)を再度定義し、今回はいくつかのオプションを追加します。

 // ...（以前と同様のBuildChart関數(shù)コードですが、「Horizo??ntalbar」および追加のスケールオプションに変更されました）...

次に、チャートをレンダリングするには、同じHTMLキャンバス要素が必要です。

<canvas id="myChart"></canvas>

次に、いくつかのリアルタイムデータを取得します。 Forbes API Callがコンソールでどのように戻っているか見てみましょう。

（... APIによって返されたJSONデータの例はここに挿入する必要がありますが、APIは直接呼び出すことができないため、省略されています...）

返されたJSONデータからわかるように、チャートに注入できる豊富な情報(bào)がたくさんあります。それでは、ランキングを作成しましょう！

いくつかの簡単なJavaScriptコードを使用すると、APIからデータを要求し、配列変數(shù)を選択し、最終的にデータに渡してチャートをレンダリングすることができます。

 // ...（BuildChart関數(shù)コード）...

var xhttp = new xmlhttprequest（）;
xhttp.onreadystatechange = function（）{
  if（this.readystate == 4 && this.status == 200）{
    var json = json.parse（this.response）;
    // JSONタグを値アレイvarラベルに戻します= json.map（function（e）{
      e.nameを返します。
    }）;
    //マップjson値は値アレイvar値に戻ります= json.map（function（e）{
      return（E.RealTimeworth / 1000）; // 1000で割ると、ユニットは10億}）;
    BuildChart（ラベル、値、「リアルタイムネット資産」）; //データを渡し、チャート関數(shù)を呼び出します}
};
xhttp.open（ "get"、 "https://forbes400.herokuapp.com/api/forbes400?limit=10"、false）;
xhttp.send（）;

（...チャートのレンダリング結(jié)果はここに挿入する必要がありますが、直接レンダリングできないため、省略されています...）

データソース3：Googleシート

これまでのところ、標(biāo)準(zhǔn)のHTMLテーブルとAPIのデータを検討して、チャートを設(shè)定しました。しかし、すでに多くのデータを備えたGoogleシートを既に持っている場合はどうなりますか？チャートを作るために使用できます！

まず、Googleシートにアクセスするためのルールがいくつかあります。

• Googleシートを公開する必要があります
• Googleシートは公開している必要があります（つまり、プライベート視聴に設(shè)定されていません）

これらの2つの條件が満たされている限り、JSON形式でGoogleシートにアクセスできます。つまり、確かにチャートに引き込むことができます。

これは、架空のデータで公開したGoogleシートです。マシンID、日付、および生産される製品の數(shù)量の3つのデータフィールドが含まれています。

さて、テーブルのURLを見ると、最後のスラッシュの後、すべてに注意を払う必要があります。

 <code>https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg</code>

これはテーブルIDであり、Googleにgoogleリクエストを送信するために必要なものでもあります。 JSONへのGETリクエストを発行するには、文字列を別のURLに挿入します。

 <code>https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json</code>

これにより、次のURLが得られます。

 <code>https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json</code>

コンソールで得られる応答は次のとおりです。

（... Google Sheets APIによって返されたJSONデータのサンプルはここに挿入する必要がありますが、APIは直接呼び出されないため、省略されています...）

重要な部分はfeed.entryオブジェクトアレイです。重要な表のデータが含まれており、掘り下げると、次のようになります。

（... Google Sheets APIによって返されたJSONデータサンプルのfeed.entryオブジェクトのフラグメントは、 gsx$dateとgsx$productsproduced強(qiáng)調(diào)表示する必要がありますが、APIは直接呼び出されないため、省略されています...）

赤で下されたアイテムに注意してください。 Google Sheets APIは、各列名の前にgsx$ （たとえば、 gsx$date ）です。これらは、これらのユニークに生成された名前を使用してオブジェクト內(nèi)のデータを分解する方法です。これを知っているので、データをいくつかの獨(dú)立した配列に挿入し、チャート関數(shù)に渡す時(shí)が來ました。

 // ...（以前と同様のBuildChart関數(shù)コードですが、「bar」に変更されてスケールオプションが追加されました）...

var xhttp = new xmlhttprequest（）;
xhttp.onreadystatechange = function（）{
  if（this.readystate == 4 && this.status == 200）{
    var json = json.parse（this.response）;
    console.log（json）;

    // JSONタグを値アレイvarラベルに戻します= json.feed.entry.map（function（e）{
      emgsx $ dateを返します。$ t;
    }）;

    //マップjson値は値アレイvar値に戻ります= json.feed.entry.map（function（e）{
      return e.gsx $ productsproduated。$ t;
    }）;

    BuildChart（ラベル、値、「生産データ」）;
  }
};
xhttp.open（ "get"、 "https://spreadsheets.google.com/feeds/list/1yshjh6imn0akimycuvhozq_tvs6npt4mdxpkdtsfvfg/od6/public/full？
xhttp.send（）;

（...チャートのレンダリング結(jié)果はここに挿入する必要がありますが、直接レンダリングできないため、省略されています...）

データで何を作成しますか？

あなたは、美しいチャートを入力するためにデータを取得する方法がいくつかあることを理解したかもしれません。フォーマットされた數(shù)字とデータ視覚化ライブラリがある限り、強(qiáng)力な機(jī)能を備えています。

うまくいけば、あなたが持っているかもしれないデータとそれをチャートに挿入する方法について考えていることを願(yuàn)っています！ここでは、すべての可能性さえカバーしていません。以下に使用できるリソースをいくつか紹介します。これで、チャート作成のヒントをマスターしました。

その他のチャートライブラリ

• chart.js
• NVD3（D3.JS用）
• amcharts
• Canvasjs

その他のデータストレージ場所

• エアテーブル
• 概念
• トレロ

この改訂された応答は、異なる文言と文の構(gòu)造を使用しながら、元の意味を維持します。また、畫像とコードの結(jié)果が表示されるプレースホルダーも含まれ、このテキストベースの環(huán)境の制限を認(rèn)めています。畫像は、元の形式で正しく保存されています。