SYNCER

SYNCER

<amp-viz-vega> - Vegaのデータビジュアライゼーションを表示する

1件

公開日:

AMPのamp-viz-vegaは、JavaScriptライブラリのVegaを利用したデータビジュアライゼーションを可能にする要素です。2017年2月現在、この要素は実験的な機能なため、本番環境での利用は非推奨です。

概要

名前
amp-viz-vega
可用性
Experimental (実験段階)
サポートするレイアウト
fill,fixed,fixed-height,flex-item,nodisplay,responsive
必要なスクリプト
<script async custom-element="amp-viz-vega" src="https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js"></script>
ドキュメント
https://www.ampproject.org/docs/reference/extended/amp-viz-vega.html

属性

src

JSONのURL。httpsでなければいけない。子要素にscript要素がある時に指定するとエラーになる。

use-data-height

この属性を付けると、データの高さを採用する。

use-data-width

この属性を付けると、データの横幅を採用する。

共通属性

AMPの全てのタグで利用できる共通属性を指定できます。

説明

amp-viz-vegaを利用するには、専用のライブラリを読み込む必要があります。

HTML

<script async custom-element="amp-viz-vega" src="https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js"></script>

サンプルコード

HTML

<!doctype html>
<html amp>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<amp-viz-vega> - Vegaのデータビジュアライゼーションを表示する</title>
		<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-viz-vega/">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		<style amp-custom>
			body {
				padding: 12px ;
				background-color: #fff ;
			}
		</style>
		<script type="application/ld+json">
			{
				"@context": "http://schema.org",
				"@type": "NewsArticle",
				"headline": "記事のタイトル",
				"image": [
					"eyecatch.jpg"
				],
				"datePublished": "2017-08-23T00:00:00+0900"
			}
		</script>
		<script async custom-element="amp-viz-vega" src="https://cdn.ampproject.org/v0/amp-viz-vega-0.1.js"></script>
		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
		<script async src="https://cdn.ampproject.org/v0.js"></script>
	</head>
	<body>

<p>実験的な機能のため、まだ使えません…。早とちりしてページ作ってしまいました…。</p>

<amp-viz-vega width="400" height="400" layout="responsive">
    <!-- https://github.com/vega/vega/blob/master/examples/arc.json -->
    <script type="application/json">
      {
        "width": 400,
        "height": 400,
        "data": [
          {
            "name": "table",
            "values": [12, 23, 47, 6, 52, 19],
            "transform": [{"type": "pie", "field": "data"}]
          }
        ],
        "scales": [
          {
            "name": "r",
            "type": "sqrt",
            "domain": {"data": "table", "field": "data"},
            "range": [20, 100]
          }
        ],
        "marks": [
          {
            "type": "arc",
            "from": {"data": "table"},
            "properties": {
              "enter": {
                "x": {"field": {"group": "width"}, "mult": 0.5},
                "y": {"field": {"group": "height"}, "mult": 0.5},
                "startAngle": {"field": "layout_start"},
                "endAngle": {"field": "layout_end"},
                "innerRadius": {"value": 20},
                "outerRadius": {"scale": "r", "field": "data"},
                "stroke": {"value": "#fff"}
              },
              "update": {
                "fill": {"value": "#ccc"}
              },
              "hover": {
                "fill": {"value": "pink"}
              }
            }
          },
          {
            "type": "text",
            "from": {"data": "table"},
            "properties": {
              "enter": {
                "x": {"field": {"group": "width"}, "mult": 0.5},
                "y": {"field": {"group": "height"}, "mult": 0.5},
                "radius": {"scale": "r", "field": "data", "offset": 8},
                "theta": {"field": "layout_mid"},
                "fill": {"value": "#000"},
                "align": {"value": "center"},
                "baseline": {"value": "middle"},
                "text": {"field": "data"}
              }
            }
          }
        ]
      }
      </script>
  </amp-viz-vega>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

</body> </html>

<style amp-custom>

</style>