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

Webブラウザにてグラフを作成したいと思い、Chart.js(Ver.2)を使っています。

1時間当たりの濃度変化グラフを描いたのですが、次のような表示となり、X軸のラベル間隔を5分間隔で表示したいと考えています（5･10･15分…）。

そこで次のURLなどを調べ、chart.jsのドキュメントも読んだのですが、どうにもうまくいかず、質問させていただく次第です。

http://kimagureneet.hatenablog.com/entry/2016/02/17/012643

なお下のHTMLにおけるJavaScript内で、n分値のラベルを作成している中、IF分を用いて5つおきにラベルを入れるということはできるのですが、そうするとマウスカーソルを合わせた時にデータ表示がうまくいかず、どうにも解決法がわかりません。

ご存知の方、いらっしゃいましたら具体的にご教授いただけたら幸いです。

HTML
1<html>
2    <head>
3        <title>TEST</title>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
7    </head>
8    <body>
9        <canvas id="fig1"></canvas>
10        <script>
11            var x_label = [];
12            var i;
13            for (i = 0; i < 60; i++) {
14                x_label.push((i + 1) + "分");
15            };
16            var ctx = document.getElementById("fig1");
17            var fig1 = new Chart(ctx,
18                    {
19                        type: 'line',
20                        data: {labels: x_label,
21                            datasets: [{
22                                    label: "濃度",
23                                    fill: false,
24                                    lineTension: 0,
25                                    backgroundColor: "rgba(179,181,198,0.2)",
26                                    borderColor: "rgba(179,181,198,1)",
27                                    pointBorderColor: "rgba(179,181,198,1)",
28                                    pointBackgroundColor: "#fff",
29                                    pointRadius: 5,
30                                    pointHoverRadius: 8,
31                                    pointHoverBackgroundColor: "rgba(179,181,198,1)",
32                                    pointHoverBorderColor: "rgba(220,220,220,1)",
33                                    pointHitRadius: 15, data: [12, 3, 5, 2, 3, 9, 10, 22, 3, 23, NaN, 23, 32, 2, 4, 12, 32, 34, 32, 2, 23, 21, 45, 4, 3, 2, 6, 54, 7, 4, 54, 2, 67, 4, 2, 16, 0, 23]
34                                }
35                            ]},
36                        options: {
37                            scales: {
38                                yAxes: [{ticks: {
39                                            beginAtZero: true,
40                                            stepSize: 5,
41                                        }
42                                    }]},
43                            hover: {mode: 'single'},
44                        }
45                    }
46            );
47        </script>
48    </body>
49</html>
50

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

回答3件

ベストアンサー

x軸のラベルは他の方の回答のようにして、さらにツールチップの内容を書き換えるというのはどうでしょうか。

JavaScript
1options: {
2  tooltips: {
3    callbacks: {
4      title: function(items) {
5        return items[0].index + "分";
6      }
7    }
8  }
9}

ドキュメントとサンプル

※上記のサンプルでは0分から開始してツールチップのindex + "分"をそのままタイトルにしてます。

投稿2016/11/11 09:39

guest1213

総合スコア306

cafe_takai

2016/11/11 11:08

ご回答ありがとうございます。なるほど。そういうやり方があるのですね。勉強になりました。ありがとうございます。ご教授いただきました方法で対応したいと思います。

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

Chart.jsを使ったことないので正攻法がわかりませんが、
配列に空文字を入れることでスペースを開ける無理やりなやり方です。

HTML
1<html>
2    <head>
3        <title>TEST</title>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
7    </head>
8    <body>
9        <canvas id="fig1"></canvas>
10        <script>
11            var x_label = [];
12            var i;
13            for (i = 1; i < 59; i++) {
14              if (i % 5 === 0 || i === 0) {
15                x_label.push((i) + "分");
16              } else {
17                x_label.push("");
18              }
19            
20            };
21            var ctx = document.getElementById("fig1");
22            var fig1 = new Chart(ctx,
23                    {
24                        type: 'line',
25                        data: {
26                            labels: x_label,
27                            datasets: [{
28                                    label: "濃度",
29                                    fill: false,
30                                    lineTension: 0,
31                                    backgroundColor: "rgba(179,181,198,0.2)",
32                                    borderColor: "rgba(179,181,198,1)",
33                                    pointBorderColor: "rgba(179,181,198,1)",
34                                    pointBackgroundColor: "#fff",
35                                    pointRadius: 5,
36                                    pointHoverRadius: 8,
37                                    pointHoverBackgroundColor: "rgba(179,181,198,1)",
38                                    pointHoverBorderColor: "rgba(220,220,220,1)",
39                                    pointHitRadius: 15, data: [12, 3, 5, 2, 3, 9, 10, 22, 3, 23, NaN, 23, 32, 2, 4, 12, 32, 34, 32, 2, 23, 21, 45, 4, 3, 2, 6, 54, 7, 4, 54, 2, 67, 4, 2, 16, 0, 23]
40                                }
41                            ]},
42                        options: {
43                            scales: {
44                                yAxes: [{ticks: {
45                                            beginAtZero: true,
46                                            stepSize: 5,
47                                        }
48                                    }]},
49                                xAxes: [{
50                                  ticks: {
51                                    stepSize: 5,
52                                  }
53                                }],
54                            hover: {mode: 'single'},
55                        }
56                    }
57            );
58        </script>
59    </body>
60</html>