質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.23%

amp対応した際のcanvasタグの処理・変換

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 357

musashidayo

score 33

現在Wordpressのサイトを作成している最中でページ速度を早めるためにAMPを導入してみたのですが(AMP Plugin Release v1.0-RC1)、chart.jsでcanvasタグを出力している場所でjavascriptも使えなく画像に変換して表示する方法も使えなく困っています。

このような処理を実装している方よろしければ何かいい解決策をお願いします。
現在以下のコードでradarチャートを描写しています。

<div class="canvas_outer">
        <canvas id="myRadarChart1" width="" height=""></canvas>
    </div>
    <script>
        var colorSet = {
            grey: 'rgb(201, 203, 207)',
            pink: 'rgba(242, 158, 164, 1)'
        };
        // 色のRGB変換
        var color = Chart.helpers.color;
        var ctx = document.getElementById("myRadarChart1").getContext('2d');
        var myRadarChart1 = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: [
                    '<?php $field1 = get_field_object('score_1'); echo $field1['label']; ?>',
                    '<?php $field2 = get_field_object('score_2'); echo $field2['label']; ?>',
                    '<?php $field3 = get_field_object('score_3'); echo $field3['label']; ?>',
                    '<?php $field4 = get_field_object('score_4'); echo $field4['label']; ?>',
                    '<?php $field5 = get_field_object('score_5'); echo $field5['label']; ?>'
                ],
                datasets: [{
                    label: '',
                    data: [
                        <?php
                            $value1 = get_field('score_1');
                            echo $value1;
                        ?>,
                        <?php
                            $value2 = get_field('score_2');
                            echo $value2;
                        ?>,
                        <?php
                            $value3 = get_field('score_3');
                            echo $value3;
                        ?>,
                        <?php
                            $value4 = get_field('score_4');
                            echo $value4;
                        ?>,
                        <?php
                            $value5 = get_field('score_5');
                            echo $value5;
                        ?>
                    ],
                    backgroundColor: [
                        'rgba(239, 185, 199, 0.57)',
                    ],
                    borderColor: [
                        'rgba(239, 185, 199, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                },
                scale: {
                    pointLabels: {
                        fontSize: 12, //フォントサイズ
                        fontFamily: "'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN'",
                        fontColor: colorSet.pink
                    },
                    ticks: {
                        display: false,
                        fontSize: 10,
                        stepSize: 20,
                        max: 100,
                        beginAtZero: true,
                    },
                    gridLines: {
                        pointLabels: {
                            fontSize: 18
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        display: false,
                        gridLines: {
                            drawBorder: false
                        }
                    }],
                    xAxes: [{
                        display: false,
                        gridLines: {
                            drawBorder: false
                        }
                    }]
                }
            }
        });
    </script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる