chart.js制作折线图

时间：2021-07-24 03:20:15
<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="Chart.js-master/Chart.min.js"></script>

<body>

<div class="canvasWrapper">

<canvas id="myChart" width="600" height="400"></canvas>

</div>

</body>

<script>

        var data = {

            labels : ["January","February","March","April","May","June","July","444"],

            datasets : [

                {

                    fillColor : "rgba(220,220,220,0.5)",

                    strokeColor : "rgba(220,220,220,1)",

                    pointColor : "rgba(220,220,220,1)",

                    pointStrokeColor : "#fff",

                    data : [65,59,90,81,56,55,40,99]

                },

                {

                    fillColor : "rgba(151,187,205,0.5)",

                    strokeColor : "rgba(151,187,205,1)",

                    pointColor : "rgba(151,187,205,1)",

                    pointStrokeColor : "#fff",

                    data : [28,48,40,19,96,27,100,0]

                }

            ]

        }

    var ctx = document.getElementById("myChart").getContext("2d");

    new Chart(ctx).Line(data);

</script>

</html>

http://pan.baidu.com/s/1hqwbBZu

相关文章