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

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

###■今の状態
そのために次のように書いてあります。しかし、
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>

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

投稿2017/08/08 18:08

kei344

総合スコア69625

退会済みユーザー

2017/08/08 19:06

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

退会済みユーザー

2017/08/09 04:22

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