データをチャートに入れる多くの方法

最近では、データはどこにでもあります。それは、プレーンテキストファイル、REST API、またはオンラインのGoogleシートなどです...すべてが利用可能です！この多様なデータソースは、地元のプロジェクトデータベースだけでなく、チャート構造を作成します。データがある場合、メソッドがあります。

この記事では、さまざまなデータソースを使用してJavaScriptデータ視覚化チャートを作成する方法について説明します。

あなたがそれをしたい場合は、chart.jsを使用し、ダウンロードして開発環境に含めます。

<code></code>

データソース1：HTMLデータテーブル

多くのウェブサイトはデータシートを使用していますが、これはデータを表示するのに最適な方法であるため理解できます。しかし、テーブルにデータを使用して視覚チャートを簡単に作成できれば、それ以上の方が良いでしょうか？

JavaScriptコードを少量だけ使用すると、HTMLテーブルからデータを抽出して、チャートで使用する準備をすることができます。次のデータ表をご覧ください。

年	販売量	ターンオーバー（$）	利益（$）
2016年	10	200	89
2017年	25	550	225
2018年	55	1200	600
2019年	120	2450	1100

この表には、会社の販売データが含まれています。グラフに描画できれば、視覚的に魅力的で、ユーザーがデータを見るのに役立ちます。始めましょう！

まず、チャート関数を定義しましょう。この関数はchart.jsライブラリから直接送られているため、何かが不明な場合は、ドキュメントを参照することをお勧めします。重要な部分を強調するためにいくつかのコメントを追加しました。

関数buildChart（ラベル、値、charttitle）{
  var ctx = document.getElementById（ "mychart"）。getContext（ '2d'）;
  var mychart = new Chart（ctx、{
    タイプ： 'bar'、
    データ： {
      ラベル：ラベル、//タグデータセット：[{
        ラベル：charttitle、// series name data：values、// value backgroundcolor：[//カスタムバックグラウンドカラー 'rgba（255、99、132、0.2）'、
          'RGBA（54、162、235、0.2）'、
          'RGBA（255、206、86、0.2）'、
          'RGBA（75、192、192、0.2）'、
          'RGBA（153、102、255、0.2）'、
          「RGBA（255、159、64、0.2）」
        ]、、
        BorderColor：[//カスタムボーダーカラー 'RGBA（255,99,132,1）'、
          'RGBA（54、162、235、1）'、
          'RGBA（255、206、86、1）'、
          'RGBA（75、192、192、1）'、
          'RGBA（153、102、255、1）'、
          「RGBA（255、159、64、1）」
        ]、、
        境界幅：1 //境界幅}]
    }、
    オプション：{
      応答性：true、// adaptive maintingaspectratio：false、//デフォルトの全幅/フルハイトの動作を防ぐ}
  }）;
  mychartを返します。
}

テーブルデータを作成するチャート関数が作成されたので、テーブルのHTMLコードを記述し、Chart.jsを使用してチャート要素を注入できるキャンバス要素を追加しましょう。これは、上記の表のデータのデータとまったく同じです。

年	販売量	ターンオーバー（$）	利益（$）
2016年	10	200	89
2017年	25	550	225
2018年	55	1200	600
2019年	120	2450	1100

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

次に、ネイティブJavaScriptを使用してテーブルをJSONに解析する必要があります。 Chart.jsはこのJSONを使用してチャートを設定します。

 // ...（BuildChart関数コード）...

var table = document.getElementById（ 'datatable'）;
var json = []; //最初の行はヘッダーvar headers = [];です。
for（var i = 0; i 

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

完璧！私たちのテーブルヘッダーは変数になり、テーブルセルの内容にマップします。

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

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

 //マップ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関数を呼び出し、チャートをレンダリングvar chart = buildChart（ラベル、値、「前の販売」）;

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

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

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

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

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

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

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

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

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

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

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

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

 // ...（BuildChart関数コード）...

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（ラベル、値、「リアルタイムネット資産」）; //データを渡し、チャート関数を呼び出します}
};
xhttp.open（ "get"、 "https://forbes400.herokuapp.com/api/forbes400?limit=10"、false）;
xhttp.send（）;

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

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

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

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

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

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

これは、架空のデータで公開したGoogleシートです。マシンID、日付、および生産される製品の数量の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強調表示する必要がありますが、APIは直接呼び出されないため、省略されています...）

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

 // ...（以前と同様のBuildChart関数コードですが、「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（）;

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

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

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

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

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

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

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

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

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

以上がデータをチャートに入れる多くの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。