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

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

ただいまの
回答率

90.50%

  • JavaScript

    16457questions

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

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4027questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    258questions

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

chart.jsにてレーダーチャートを作成する際のラベルの表示について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,598

yukabyo

score 119

現在chart.jsにてレーダーチャートを作成しています。
chart.jsのドキュメント
参考にしたサイト

以下の画像のような感じで現在表示されているのですが、
やりたいことは、①か②のどちらかです。
(どちらも方法がわかれば有り難いですがどちらかでも構いません)

① [ラベル名](その隣のピンクの長方形も合わせて)を消す
② [ラベル名]のfont-familiyを変更する(その下のグラフ内にある、[項目1,項目2・・・]のfont-familiyは変更できたのですが、ラベル名のfont-familiyが変わりません。)

ドキュメントを読んだのですがどの部分をどこに追加すればいいのかがわからず、教えていただきたいです。
よろしくお願いいたします。

イメージ説明

<div class="chart_position">
   <canvas id="chartTest" width="300" height="300"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<script>
//グラフ1
$(function(){
  'use strict';
  (function(){
    var $win = $(window);
    var position01 = $('.chart_position').offset().top - ($win.height() / 3 * 2);
    var flag = null;

    // レーダーチャートの出現設定から色とかの設定
    $win.scroll(function(){
        if($(this).scrollTop() > position01 && flag === null){
          flag = 1;
          var testData = {
            labels: ["項目1","項目2","項目3","項目4","項目5","項目6"],
            datasets: [
              {
                label: "ラベル名",
                borderColor: "rgba(241,87,130,0.9)", //線の色
                backgroundColor: "rgba(241,87,130,0.6)", //線の中を埋める色
                pointBackgroundColor: "rgba(241,87,130,1)", //ポイントの背景色
                data: [8,8.1,7.6,9.5,8.3,7],
              }
            ]
          };

          var testContext = document.getElementById("chartTest").getContext("2d");
          var test_chart = new Chart(testContext, {
            type: 'radar',
            data: testData,
            options: {
              scale: {
                pointLabels: {
                  fontSize: 14, //フォントサイズ
                  fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
                },
                ticks: { //http://www.chartjs.org/docs/#scales-radial-linear-scale
                  stepSize: 2, // 目盛の間隔
                  max: 10, //最大値
                  beginAtZero: true,
                }
              }
            }
          });
          stressFactorChart.options.legend.display = false; //これで凡例が表示されない
        }
    });
  })();
});
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

① [ラベル名](その隣のピンクの長方形も合わせて)を消す 

new Chart時のoptionsでlegend.display=falseをすればできました。

    options: {
         legend: {
            display: false
         }
    }

動くjsFiddleのサンプル

※凡例のフォント指定もできそうでしたよ(マニュアル参照

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/13 10:50

    ご回答くださった、① [ラベル名](その隣のピンクの長方形も合わせて)を消す方法で解決できました。
    追記のフォント指定も、サンプルも、ありがとうございました。
    大変助かりました。ありがとうございますm(__)m



    キャンセル

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

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

関連した質問

  • 解決済

    【jOrgChart】組織図(チャート)を複製する方法

    こんにちは。 いつもお世話になっています。 jQueryで組織図を生成したいと考え、 「jOrgChart」 https://github.com/wesnolte/jO

  • 解決済

    MYSQLのデータを動的にチャート表示させたいです。

    MYSQLのデータを動的にチャート表示させたいです。 json.htmlのDATAにjson.phpから受け取った値を入れたいのですが、どなたかご教授頂けないでしょうか?

  • 解決済

    jQueryを使ってボタン操作でsection移動をうまくしたい

    現状・目標 シンプルに下ボタンを押せば下に、上ボタンを押せば上に 指定したクラスに一個ずつスクロールするjsを組みたいです。 参考URLを参考に作りました。 これの、逆

  • 解決済

    三秒点灯させて三秒点滅 JS

    信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわ

  • 解決済

    Chart.jsにおけるX軸の間隔を設定したい

    Webブラウザにてグラフを作成したいと思い、Chart.js(Ver.2)を使っています。 1時間当たりの濃度変化グラフを描いたのですが、次のような表示となり、X軸のラベル間

  • 解決済

    chart.jsで境界線以降を塗りつぶしたい。

    chart.jsを使ってグラフを表示する機能を実装しています。 chart.jsのドキュメントを一通り見ましたが見つからなかったので質問させていただきます。 下の画像の黄色

  • 解決済

    スワイプ操作での画面遷移

    前提・実現したいこと Monacaでアプリ開発の勉強をしているのですが、OnsenUIのpushpageで画面遷移をした後に、画面を上にスワイプすることでpop-pageができる

  • 解決済

    Chart.js 1.xのグラフを2.xで動作させたい

    前提・実現したいこと 現在Chart.js 2.1.3 で開発しているシステムの改修を行っているのですが 仕様変更でグラフの横幅が広くなったものがあり、スクロールバーでスクロー

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

  • JavaScript

    16457questions

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

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4027questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    258questions

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