ポリマー-Google Chart

<google-chart>は、データの視覚化に使用されるグラフを含む要素です。この要素には、*円グラフ、折れ線グラフ、縦棒グラフ、面グラフ、ツリーマップ*などのさまざまなグラフが含まれます。

注-有効なJSONの場合、属性としてJSONを渡す場合は単一引用符を使用する必要があります。

以下に示すように、スタイル属性として高さと幅を指定できます-

google-chart {
   height: 100px;
   width: 300px;
}

次の方法のいずれかを使用してデータを提供できます-

colsおよびrows属性を使用します。

cols = '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows = '[[Oct", 31],["Nov", 30],["Dec", 31]]'

データ属性を使用して、データを直接渡すことができます。

data = '[[Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'

データ属性を使用して、URLでデータを渡すことができます。

data = 'http://demo.com/chart-data.json'

_data attribute_を使用して、Google DataTableオブジェクトにデータを渡すことができます

data = '{{dataTable}}'

_view_属性の使用

view = '{{dataView}}'

次のコードスニペットに示すように、 "en" 以外のロケールでチャートを表示する場合は、htmlタグにlang属性を設定できます。

<html lang = "ja">

例

google-chart要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。

bower install PolymerElements/google-chart --save

上記のコマンドは、bower_componentsフォルダーにgoogle-chart要素をインストールします。次に、次のコマンドを使用してgoogle-chartファイルをインデックスにインポートします。

<link rel = "import" href = "/bower_components/google-chart/google-chartl">

次の例は、google-chart要素の使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>google-chart</title>
      <base href = "http://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "google-chart/google-chartl">
   </head>

   <body>
      <google-chart
         type = 'pie'
         options = '{"title": "Pie Chart", "vAxis": {"minValue" : 0, "maxValue": 8}}'
         cols = '[{"label": "Country", "type": "string"},{"label": "Value", "type": "number"}]'
         rows = '[[Germany", 5.0],["US", 4.0],["Africa", 11.0],["France", 4.0]]'>
      </google-chart>
   </body>
</html>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

Google Chart

Polymer-google-chart

ポリマー-Google Chart

例

出力