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

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

ただいまの
回答率

90.50%

  • JavaScript

    16440questions

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

【chart.js】レーダーチャートの矩形の背景色について

解決済

回答 2

投稿 編集

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

kaoru08011

score 3

 前提・実現したいこと

chart.jsを使ってレーダーチャートを作っています。
グレーの背景色の上にチャートを設置するので、
チャートの目盛り内の背景色を白(#fff)に設定したいのですが、
どのオプションを設定すれば可能になるでしょうか。
また、どのような実現方法があるでしょうか。
レーダーチャート自体は問題なく表示されています。

具体的には、下記のようなチャートでいうと、
矩形(100〜0の目盛りの部分)の背景色を白くしたいです。
参考

 該当のソースコード

<div id="contents">
<div class="chartArea">
    <canvas id="myChart"></canvas>
</div>
</div>


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js">
    body {
        background: #fff;
    }
    #contents {
        width: 60%;
        margin: 0 auto;
        padding: 100px 0;
    }
    .chartArea {
        max-width: 500px;
        height: 500px;
        margin: 0 auto;
        background: #ccc;
    }
    (function(){
        'use strict';
        var type = 'radar';

        var data = {
            labels: ['項目1', '項目2', '項目3', '項目4', '項目5', '項目6'],
            datasets: [{
                label: 'sample',
                data: [4, 2, 5, 2, 5, 3],
                backgroundColor: 'rgba(182,124,125,.4)',
                borderColor: 'rgba(202,129,125,1)',
                borderWidth: 1,
                pointRadius: 0,
                pointHitRadius: 0,
            }]
        };

        var options = {
            scale: {
                pointLabels: {
                    fontColor: '#333',
                    fontSize: 14,
                    fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                },
                ticks: {
                    display: false,
                    suggestedMin: 0,
                    suggestedMax: 4,
                },
                gridLines: {
                    display: true,
                },
            },
            title: {
                display: false,
            },
            animation: {
                duration: 1500,
            },
            legend: {
                display : false,
            }
        };

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: type,
            data: data,
            options: options
        })
    })();

 補足

chart.jsのドキュメントを見ると、目盛り関連のオプションは「gridLines」で設定できるようですが、
ここには背景色のオプションがそもそも無いようで・・・、どうにもならないでしょうか。
お力添えをいただければと思います。

参考:chart.jsドキュメント

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    2018/07/06 16:18

    JavaScriptコードも省略されてしまうと(特に冒頭)再現確認が難しいです。やはり最低限htmlも記載されたほうが良いかと。

    キャンセル

  • kaoru08011

    2018/07/06 16:27

    ご指摘ありがとうございます。デモで作っていた最低限のコードでしたので省いてしまっていました・・・。

    キャンセル

回答 2

check解決した方法

+1

mts10806様にご教示いただいた方法で解決いたしました。

参考ページの通り、
canvas描画の前にbeforeDraw関数を記述。
ただしこのままだとcanvas全体に色が敷かれてしまうので
fillRect()メソッドの代わりにlineToメソッドでレーダーチャートと同形の矩形を描画し解決いたしました。

ありがとうございました。

    (function(){
        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.beginPath();
                    ctx.moveTo(250,19);
                    ctx.lineTo(342,72);
                    ctx.lineTo(342,178);
                    ctx.lineTo(250,230);
                    ctx.lineTo(158,178);
                    ctx.lineTo(158,72);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
            }
        });

        var type = 'radar';

         〜略〜


        var options = {
            scale: {
                pointLabels: {
                    fontColor: '#333',
                    fontSize: 14,
                    fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                },

         〜略〜

            chartArea: {
                    backgroundColor: 'rgba(247, 247, 246, 1)'
            }
        };

        var ctx = document.getElementById('myChart').getContext('2d');

        var myChart = new Chart(ctx, {
            type: type,
            data: data,
            options: options
        })
    })();

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/06 17:42

    直接の解決方法はこちらなので、こちらのご自身の回答をベストアンサーとされた方が良いと思います。
    あとから同じ問題を抱えた人が見たときにベストアンサーが最も目につきます。

    キャンセル

  • 2018/07/06 17:50

    そうなのですね!登録したてで操作等あまり分からずで・・・。
    アドバイスいただき重ね重ねありがとうございます。

    キャンセル

+1

下記の記事は参考になりますでしょうか。

元々あるオプションで解決するのではなく、
色々と機能追加していくようです。

「グラフエリア背景」あたりで実現可能に思いますがいかがでしょうか?
※すみません。私がただしく理解できていないかもしれません。ひとまず全体背景色は上記URL参考に変更できました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/06 17:31

    ご教示いただきありがとうございます!
    教えていただいたページの内容で実現することができました!

    一番最初に掲載されている記述を使い解決できましたが、
    こちらの記述だとcanvasエリア全体に背景色が敷かれてしまいますので
    fillRect()メソッドの記述を削除し、代わりに
    lineTo()メソッドを使いレーダーチャートの矩形の形にパスを引くことで思い通りの背景を敷くことができました。
    (説明が下手ですみません・・・)

    とても助かりました。
    お力添えいただき、本当にありがとうございました。

    キャンセル

  • 2018/07/06 17:33

    どこか(chart.js本体)で色つけたり形作ってるのは確かなので、そこをいじれば何とかなるのはなるようですね。
    解決できたようで何よりです。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16440questions

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