springboot+thymeleaf使用highcharts实现折线图

首先使用下面的插件，可去https://download.csdn.net/download/qq_38522268/10689045下载
<script th:src="@{/js/jquery-1.8.0.min.js}" type="text/javascript"></script>

<script type="text/javascript" th:src="@{/chart/highcharts.js}"></script>

 

在ajax里跨域调用json的数据，并在折线图中显示：

详细的json格式如下

{
  "code": 200,
  "describe": "获取成功",
  "data": [
    {
      "mac": "1",
      "time": "2018-08-10 00:08:08",
      "data_temp": "29.0",
      "data_ry": "11.7"
    },
    {
      "mac": "1",
      "time": "2018-08-10 00:21:00",
      "data_temp": "29.0",
      "data_ry": "11.7"
    },
    {
      "mac": "1",
      "time": "2018-08-10 00:33:53",
      "data_temp": "28.9",
      "data_ry": "11.7"
    }

............此处省略

｝

下面是在ajax里使用highcharts，横坐标为上面json的time，纵坐标为data_temp

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        var mac = [[${mac}]];
        var first = [[${first}]];
        var last = [[${last}]]
        $.ajax({
            type: "POST",
            url: "",//此处为你的可跨域的URL，如何实现请看https://blog.csdn.net/qq_38522268/article/details/82496362
            dataType: "json",
            data: {//data就是参数，是json格式
                mac: mac,
                firstdate: first,
                lastdate: last
            },
            success: function (data) {
                var strtemp = "";
                var strtime = "";
                var strry = "";
                if (data.code === 200) {
                    for (var i = 0; i < data.data.length - 1; i++) {
                        var temp = data.data[i].data_temp;
                        var time = data.data[i].time;
                        var ry = data.data[i].data_ry;
                        strtemp += (temp + ",");
                        strtime += ("'"+time + "',");
                        strry += (ry + ",");
                    }
                    if (i = data.data.length - 1) {
                        var temp = data.data[data.data.length - 1].data_temp;
                        var time = data.data[data.data.length - 1].time;
                        var ry = data.data[data.data.length - 1].data_ry;
                        strtemp = "[" + strtemp + temp + "]";
                        strtime = "[" + strtime +"'"+time+"'"+ "]";
                        strry = "[" + strry + ry + "]";
                    }
                    console.log(strtemp);
                    console.log(strtime);
                    console.log(strry);
                    var data = strtime;
                    var temp = strtemp;

                    $("#container").highcharts({
                        chart: {
                            type: 'line'
                        },
                        title: {
                            style: {
                                fontSize: '30px',  //字体
                                fontWeight: 'bold'
                            },
                            text: '护渔宝水温'
                        },
                        subtitle: {
                            text: '数据来源: 护渔宝'
                        },
                        xAxis: {
                            labels: {
                                style: {
                                    fontSize: '18px'  //字体
                                }
                            },
                            title: {
                                text: '时间',
                                style: {
                                    fontSize: '15px'  //字体
                                }
                            },
                     
                            categories: eval(data)
                        },
                        yAxis: {
                            labels: {
                                style: {
                                    fontSize: '18px'  //字体
                                }
                            },
                            title: {
                                text: '水温(°C)',
                                style: {
                                    fontSize: '15px'  //字体
                                }
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true          // 开启数据标签
                                },
                                enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                            }
                        },
                        series: [{
                            name: '水温',
                     
                            data: eval(temp),
                            visible: true
                        }]});

                } else if (data.code === 403) {
                    alert(data.describe);
                }

            },
            error: function () {
                alert('哎呀！出错了！');
            }
        });

    });
    /*]]>*/
</script>

不要忘记html中的id要与ajax里的一致

<div id="container"></div>