質問編集履歴

1 初心者マーク追加致しました

yukabyo

yukabyo score 129

2017/01/13 10:27  投稿

chart.jsにてレーダーチャートを作成する際のラベルの表示について
現在chart.jsにてレーダーチャートを作成しています。
[chart.jsのドキュメント](http://www.chartjs.org/)
[参考にしたサイト](http://www.madeinclinic.jp/javascript/20160828/)
以下の画像のような感じで現在表示されているのですが、
やりたいことは、①か②のどちらかです。
(どちらも方法がわかれば有り難いですがどちらかでも構いません)
① [ラベル名](その隣のピンクの長方形も合わせて)を消す
② [ラベル名]のfont-familiyを変更する(その下のグラフ内にある、[項目1,項目2・・・]のfont-familiyは変更できたのですが、ラベル名のfont-familiyが変わりません。)
ドキュメントを読んだのですがどの部分をどこに追加すればいいのかがわからず、教えていただきたいです。
よろしくお願いいたします。
![イメージ説明](4227f9ad052f082923aa494649a3a8f1.png)
```html
<div class="chart_position">
<canvas id="chartTest" width="300" height="300"></canvas>
</div>
```
```javascript
<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>
```
  • JavaScript

    23237 questions

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

  • jQuery

    9131 questions

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

  • canvas

    361 questions

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

  • HTML5

    5943 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る