chart.js-折线图

使用最新版的chart.js

chart.js官网

• 先定义画布

<div class="bar-chart" style="width:50% !important;height:300px!important;float:left;posttion:relative">
    <h5 class="bar-title">当前周用户注册数一览表</h5>
    <canvas id="currentWeekChart" width="400" height="300"></canvas>
</div>

• 定义数据集合
  这里用的是静态数据,datasets里还有许多属性,可以到官网详查

 var data = {
            labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            datasets: [
                {
                    label: "用户数量",
                    backgroundColor: "rgba(0, 0, 0, 0.1)",//线条填充色
                    pointBackgroundColor:"rgba(255,48,48,0.2)",//定点填充色
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };

• 配置options选项(这个配置可以在对统计图的细节做调整)
  这里的options是空的，具体需要哪些配置可以到官网查看每个配置项所代表的含义

var options = {};

• 获取canvas画布，开始画图

var ctx = document.getElementById("currentWeekChart").getContext("2d");
var currentWeekChart = new Chart(ctx,{
    type: 'line',
    data: data,
    options:options
});

• 效果图
  

如果有多条线时，只需在data里的datasets添加数据就行,如下

 var data = {
            labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            datasets: [
                {
                    label: "用户数量",
                    backgroundColor: "rgba(0, 0, 0, 0.1)",
                    pointBackgroundColor:"rgba(255,48,48,0.2)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "另一条线",
                    backgroundColor: "rgba(255,62,150, 0.1)",
                    pointBackgroundColor:"rgba(255,48,48,0.2)",
                    data: [13, 79, 20, 40, 80, 2, 60]
                }
            ]
        };