使用最新版的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]
}
]
};