前端应用chart.js绘制折线图使用笔记

最新推荐文章于 2024-05-07 16:40:52 发布

daniel_miau

最新推荐文章于 2024-05-07 16:40:52 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_39139129/article/details/80267206

版权

之前使用chart.js画了一个死的页面，当时没做的太详细，所以现在看看页不太清除具体都是什么意思。先看下页面效果。

只有5个点，数据全是1，都是假的，但是是这个样子。

首先这个应用起来很方便，需要有两个js就行了。

Chart.js

excanvas.min.js

首先下载这两个js

再来看页面

<html>
<head>
    <script type="text/javascript" src="<c:url value="/resources/js/Chart.js" />"></script>
    <!--[if lte IE 8]><script src="<c:url value="/resources/js/excanvas.min.js" />"></script><![endif]-->
    <!-- Bootstrap core CSS -->
    <link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
</head>
<body><div>
    <canvas id="myChart" width="600" height="300"></canvas>
</div></body>
</html>

在添加js之后，页面中只需一个<canvas>标签，具体的操作都在js中

<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["<fmt:formatDate value="${logList[0].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[1].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[2].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[3].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />", "<fmt:formatDate value="${logList[4].pickTime}" pattern="yyyy-MM-dd HH:mm:ss" />"],
            datasets: [
            {
                label: '# 一月',
                data: [${logList[0].one}, ${logList[1].one}, ${logList[2].one}, ${logList[3].one}, ${logList[4].one}],
                borderColor: [
                    'rgba(0, 0, 0, 0.8)'
                ],
                backgroundColor: [
                    'rgba(255, 255, 255, 0)'
                ],
                borderWidth: 1
            },
            {
                label: '# 二月',
                data: [${logList[0].two}, ${logList[1].two}, ${logList[2].two}, ${logList[3].two}, ${logList[4].two}],
                borderColor: [
                    'rgba(0, 0, 0, 0.8)'
                ],
                backgroundColor: [
                    'rgba(255, 255, 255, 0)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,//纵坐标从零开始
                        steps: 10,
                        stepValue: 5,
                        max: 10
                    }
                }]
            }
        }
    });
</script>

因为先前线太多了，所以我就把它删的只剩两个了，从这里面可以看出来：

type里表示的是要绘制的是什么样的表格。

data里加入的是数据。

options里表示的是图表的样子，这里面看起来比较复杂，稍后再考虑它。

先就来看这个data中的

labels表示的是横坐标，我这个横坐标里有时间，所以用的时候要alt+enter导入

datasets中放的是数据，我这个数据的话，只取了5条，在前面也只画5个点，可是如果要有多个点要取，该如何遍历呢，经过一番查找并没有找到好的能够遍历的方法。在后面把数据弄好了，再传过来应该是一个好办法，应该从后台下手。

问题终于得到了解决

在页面加载之后，我通过请求，取得将要放入表中的数据，并对表做好配置

<script>
    $(function(){
        chartGetJson();
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type:'line',
            data: datas,
            options: configs
        });
    });

    // 线图选项设置
    var configs  = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    steps:10,
                    stepValue: 5,
                    max:10
                }
            }]
        }
    };
    //数据结构（数据参数设置）
    var datas;
    
    // 开始绘制柱状图
    function chartGetJson() {
        var labels = [];
        var one = [];
        var two = [];
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/cloudPlatform/trendC/chartLoad" ,//url
            async: false,
            data: {"pkId": "${pkId}"},
            success: function (json) {
                for (var i = 0; i < json.one.length; i++) {
                    one.push(json.one[i]);// one
                    two.push(json.two[i]);// two

                    labels.push(new Date(json.pickTime[i]).format("yyyy-MM-dd hh:mm:ss"));// 组装x轴上显示得label
                }
                datas = {
                    //折线图需要为每个数据点设置一标签。这是显示在X轴上。
                    labels: labels,
                    //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
                    datasets: [
                        {
                            label: '# 前轴承温度',
                            //xAxisID: 0,
                            //yAxisID: 0,
                            backgroundColor: "rgba(255, 255, 255, 0)",//背景色
                            borderColor: "rgba(0, 0, 0, 0.8)", //黑色线
                            borderWidth: "1px", //线的宽度
                            data: one //对象数据
                        },
                        {
                            label: '# 后轴承温度',
                            backgroundColor: "rgba(255, 255, 255, 0)",
                            borderColor: "rgba(0, 0, 0, 0.8)", //黑色线
                            borderWidth: "1px", //线的宽度
                            data: two
                        }
                    ]
                }
            }
        });
    }

    //日期方法
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>

后台数据就正常ajax传过来就可以了。我先给它定的查5条

@RequestMapping(value="chartLoad")
public @ResponseBody Map<String,Object> chartLoad(HttpServletRequest request)
{
    Map<String,Object> resultMap = new HashMap<String, Object>();
    //查出记录集合
    List<EquipmentLog> logList = equipmentLogService.getRecrodByEqId(Integer.parseInt(request.getParameter("pkId")), 5);
    int num = logList.size();//记录条数

    //声明数据变量
    int one[] = new int[num];
    int two[] = new int[num];
    String pickTime[] = new String[num];

    //将集合中的记录拼接在一起
    for (int i = 0; i < num ; i++ ) {
        one[i] = logList.get(i).getOne();//one
        two[i] = logList.get(i).getTwo();//two
        pickTime[i] = logList.get(i).getPickTime().toString();//pickTime
    }

    resultMap.put("one",one);
    resultMap.put("two",two);
    resultMap.put("pickTime",pickTime);

    return resultMap;
}

这样就好了，数据是活的。

daniel_miau

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端应用chart.js绘制折线图使用笔记

之前使用chart.js画了一个死的页面，当时没做的太详细，所以现在看看页不太清除具体都是什么意思。先看下页面效果。只有5个点，数据全是1，都是假的，但是是这个样子。首先这个应用起来很方便，需要有两个js就行了。Chart.jsexcanvas.min.js首先下载这两个js再来看页面&lt;html&gt;&lt;head&gt; &lt;script type="text/javas...
复制链接

扫一扫