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

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

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

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

Q&A

解決済

1回答

3594閲覧

chart.jsで目盛間隔が言うことを聞いてくれない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2017/08/08 17:27

##■やりたいこと
レーダーチャートの目盛りを「5ずつ」にしたいです。

###■今の状態
そのために次のように書いてあります。しかし、
stepSize: 5,
とあるのに、どういうわけだかこれが効かないのです。
コメントの「// これがきかない」の部分です。

javascript

1<script> 2 flag = 1; 3 var testData = { 4 labels: ["甘さ","苦さ","すっぱさ","しょっぱさ","偉大さ"], 5 datasets: [ 6 { 7 label: "ラベル名", 8 borderColor: "rgba(255,255,255,0.9)", 9 backgroundColor: "rgba(255,255,255,0.5)", 10 pointBackgroundColor: "rgba(255,255,255,0.8)", 11 data: [5,55,80,15,25], 12 } 13 ] 14 }; 15 var testContext = document.getElementById("chart_aji").getContext("2d"); 16 var test_chart = new Chart(testContext, { 17 type: 'radar', 18 data: testData, 19 options: { 20 responsive: true, 21 animation : false, 22 legend: { 23 display: false 24 }, 25 scale: { 26 pointLabels: { 27 fontSize: 14, 28 }, 29 ticks: { 30 stepSize: 5, // これがきかない 31 max: 100, 32 beginAtZero: true, 33 } 34 } 35 } 36 }); 37</script>

###■ダメだった方法
ticksではなくscaleで指示するのかな、と思い次のように書いてみました。
上で書いた「// これがきかない」を消して、「これを追加」を2か所加えたのです。
が、残念、ダメでした。(>_<)

javascript

1<script> 2 flag = 1; 3 var testData = { 4 labels: ["甘さ","苦さ","すっぱさ","しょっぱさ","偉大さ"], 5 datasets: [ 6 { 7 label: "ラベル名", 8 borderColor: "rgba(255,255,255,0.9)", 9 backgroundColor: "rgba(255,255,255,0.5)", 10 pointBackgroundColor: "rgba(255,255,255,0.8)", 11 data: [5,55,80,15,25], 12 } 13 ] 14 }; 15 var testContext = document.getElementById("chart_aji").getContext("2d"); 16 var test_chart = new Chart(testContext, { 17 type: 'radar', 18 data: testData, 19 options: { 20 scaleOverride : true, // これを追加 21 scaleSteps : 5, // これを追加 22 responsive: true, 23 animation : false, 24 legend: { 25 display: false 26 }, 27 scale: { 28 pointLabels: { 29 fontSize: 14, 30 }, 31 ticks: { 32 // ここにあったのを消した 33 max: 100, 34 beginAtZero: true, 35 } 36 } 37 } 38 }); 39 40</script>

ど、どうしてでしょうか?
お分かりになる方がいらっしゃいましたら、ご指導いただければ幸いです。
よろしくお願い致します。<(_ _)>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

動きますよ。https://jsfiddle.net/Lqthwaxh/

最新のバージョンを使ってみればいかがでしょう。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

「5ずつ」が「5段階」ということであれば、データのほうを渡す前に5段階になるようにしてしまえばよいです。

投稿2017/08/08 18:08

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/08 19:06

こんばんは。 あわわ、申し訳ございません。できてますね、普通に。笑 どうやら2.1.4を読み込んでおりました。 大っ変失礼いたしましたあ!
退会済みユーザー

退会済みユーザー

2017/08/09 04:22

あの、話がズレてしまうのですけれど。ちょっと不思議で。 kei344さんの貼られたjsfiddleのリンク、あるじゃないですか。 そちらはなぜ、「最新のバージョンを読み込め」と書かれていないのに、動くのですか?? 例えば、新しくjsfiddleを開いて、HTMLとJSをそのまま同じ内容でコピペしても、(「読み込め」が書かれていないからだと思うのですが)動かないんですよね。 不思議です。
kei344

2017/08/09 04:24

左の「External Resources」に外部リソースを指定できる箇所があります。
退会済みユーザー

退会済みユーザー

2017/08/09 04:26

あちゃ、なるほど!ごめんなさいっ!まったく見ておりませんでした!汗 どうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問