Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Organization

Chart.jsをThymeleaf×SpringBootで

Chart.jsをThymeleafで使う

Chart.jsをThymeleafで使うおうとした時に、あれ?ってなったのでメモ書き
折れ線グラフにして表示したい値をコントローラーで用意して、ビューで表示するだけのサンプルです。

コントローラー

ビューに渡す値をModelに格納します。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Chart {

    @RequestMapping("/chart")
    // ビュー側にグラフで使う値を渡すためにModelを引数にとっておきます。
    public String hello(Model model) {

        // グラフの横軸と縦軸の値を、それぞれString、int型の配列に格納しておきます。

        // 横軸
        // ラベルです。String型の配列に、適当に値を入れておきます。
        String label[] = {"a","b","c","d","e","f","g"};

        // 縦軸
        // 具体的な値です。int型で、この値も適当です。
        int point[] = {5,3,7,1,8,3,4,};

        // Modelに格納します。ビュー側でグラフ用の配列を受け取れるようにしておきます。
        model.addAttribute("label",label);
        model.addAttribute("point",point);

        return "chart";
    }

}

ビュー側

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <title>折れ線グラフサンプル</title>
</head>
<body>
    <canvas id="ChartDemo"></canvas>
    <script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctx = document.getElementById("ChartDemo").getContext('2d');
    var ChartDemo = new Chart(ctx, {
        type: 'line',
        data: {
            // コントローラーで格納したlabelを変数式で取り出すだけ。
            labels: /*[[ ${label} ]]*/,
            datasets: [
                {
                    label: "Chart-1",
                    borderColor: 'rgb(255, 0, 0)',
                    lineTension: 0,
                    fill: false,
                    // 上記と同様、pointを変数式で取り出しているだけです。
                    data: /*[[ ${point} ]]*/,
                },
            ]
        },
        options: {
            responsive: true,
        }
    });
    /*]]>*/
    </script>
</body>
</html>

実行してみた

chartdemo.jpg

参考

Thymeleaf version 2.1.4の機能メモ
Thymeleafチートシート

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?