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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

解決済

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

kaoru08011
kaoru08011

総合スコア0

JavaScript

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

2回答

0評価

0クリップ

52閲覧

投稿2018/07/06 06:57

編集2022/01/12 10:58

前提・実現したいこと

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

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

該当のソースコード

HTML

<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">

JS

(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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

m.ts10806
m.ts10806

2018/07/06 07:18

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

2018/07/06 07:27

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

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