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

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

ただいまの
回答率

90.49%

  • PHP

    24449questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20855questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    7720questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • canvas

    318questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Chart.jsのradarチャート内のグラフの背景色を変えたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 380

musashidayo

score 27

Chart.js(https://www.chartjs.org/)というものを使ってレーダーチャートを出力していて、背景色(グラフエリア内のみ)を変えたいと思い色々調べたのですが、レーダーチャートの内部だけの色を変更する方法がわかりません。
http://oboe2uran.hatenablog.com/entry/2018/01/27/181126 こちらを参考にしてやってみたのですが、canvasタグ領域内の背景色が全て変わってしまい、思う通りにはいきませんでした。

以下コードをChart.jsに追記

Chart.pluginService.register({
    beforeDraw: function(c){
        if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
            var ctx = c.chart.ctx;
            var chartArea = c.chartArea;
            ctx.save();
            ctx.fillStyle = c.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});
<div class="canvas_outer">
        <canvas id="myRadarChart1" width="" height=""></canvas>
    </div>
    <script>
        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;

                    ctx.save();
                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
                    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                    ctx.restore();
                }
            }
        });
        var ctx = document.getElementById("myRadarChart1").getContext('2d');
        var myRadarChart1 = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: [
                    'A',
                    'B',
                    'C',
                    'D',
                    'E'
                ],
                datasets: [{
                    label: '',
                    data: [0,0,0,0,0,0],
                    backgroundColor: [
                        'rgba(255, 107, 107, 0.678)',
                    ],
                    borderColor: [
                        'rgba(255, 107, 107, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                chartArea: {
                    backgroundColor: 'rgba(230, 238, 255, 0.6)'
                },
                legend: {
                    display: false
                },
                scale: {
                    pointLabels: {
                        fontSize: 12, //フォントサイズ
                        fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                    },
                    ticks: {
                        fontSize: 10,
                        stepSize: 1,
                        max: 5,
                        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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • liveasnotes

    2018/09/03 15:39

    実際に書いたコードを載せてください.そうでないと,何に失敗し,どうすれば解決できるのか分かりません.またコードを載せる際は,コードブロックで囲ってください

    キャンセル

回答 1

checkベストアンサー

+1

レーダーチャートは矩形ではないのでそれぞれの座標を出さないといけないのでしょう。

        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;

                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
                    var scale = chart.scale;
                    var ticksAsNumbers = scale.ticksAsNumbers;
                    var max = ticksAsNumbers[ticksAsNumbers.length - 1];
                    for (var i = 0; i < ticksAsNumbers.length; i++) {
                        var point = scale.getPointPositionForValue(i, max);
                        if (i === 0) {
                            ctx.moveTo(point.x, point.y);
                        } else {
                            ctx.lineTo(point.x, point.y);
                        }
                    }

                    ctx.fill();
                    ctx.restore();
                }
            }
        });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/03 18:26

    回答ありがとうございます!こちらのコードでやってみたのですが、canvasタグ全体にbackgroundが効いてしまいます...

    キャンセル

  • 2018/09/03 18:30 編集

    前のスクリプトを動かしているのでは?
    提示コードからの一部上書きで確認済みです。

    キャンセル

  • 2018/09/03 18:45

    申し訳ありません。
    もう一度キャッシュクリアしてやってみたところしっかりと動いていました!
    ありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • PHP

    24449questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20855questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    7720questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • canvas

    318questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。