淘宝双十一超级红包 》
Chart.js 折线图
折线图是排列在工作表的列或行中的数据可以绘制到折线图中。
折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。
折线图 type 属性为 line ，type 描述了图表类型。
const config = {
type: 'line',
data: data,
};
接下来我们创建一个简单的折线图：
实例
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
};
const myChart = new Chart(ctx, config);
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
};
const myChart = new Chart(ctx, config);
尝试一下 »
以上实例输出结果为：
接下来我们丰富一下折线图，添加选项，设置如下：
实例
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
backgroundColor: ['rgba(179, 0, 33, 0.5)'],// 设置点的填充色
pointStyle: 'circle', //设置点类型为圆点
pointRadius: 6, //设置圆点半径
pointHoverRadius: 10, //设置鼠标移动上去后圆点半径
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
options: {
responsive: true, // 设置图表为响应式
interaction: { // 设置每个点的交互
intersect: false,
},
scales: { // 设置 X 轴与 Y 轴
x: {
display: true,
title: {
display: true,
text: '日期'
}
},
y: {
display: true,
title: {
display: true,
text: '票数'
}
}
}
}
};
const myChart = new Chart(ctx, config);
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
backgroundColor: ['rgba(179, 0, 33, 0.5)'],// 设置点的填充色
pointStyle: 'circle', //设置点类型为圆点
pointRadius: 6, //设置圆点半径
pointHoverRadius: 10, //设置鼠标移动上去后圆点半径
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
options: {
responsive: true, // 设置图表为响应式
interaction: { // 设置每个点的交互
intersect: false,
},
scales: { // 设置 X 轴与 Y 轴
x: {
display: true,
title: {
display: true,
text: '日期'
}
},
y: {
display: true,
title: {
display: true,
text: '票数'
}
}
}
}
};
const myChart = new Chart(ctx, config);
尝试一下 »
以上实例输出结果为：
垂直折线图
垂直折线图是水平折线图的变体。
垂直折线图需要将选项对象中的 indexAxis 属性设置为 y，indexAxis 属性的默认值为 x。
实例
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
backgroundColor: ['rgba(179, 0, 33, 0.5)'],// 设置点的填充色
pointStyle: 'circle', //设置点类型为圆点
pointRadius: 6, //设置圆点半径
pointHoverRadius: 10, //设置鼠标移动上去后圆点半径
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
options: {
indexAxis: 'y', // 设置垂直折线图
responsive: true, // 设置图表为响应式
interaction: { // 设置每个点的交互
intersect: false,
},
scales: { // 设置 X 轴与 Y 轴
x: {
beginAtZero: true,// 设置 X 轴从 0 开始
display: true,
title: {
display: true,
text: '日期'
}
},
y: {
display: true,
title: {
display: true,
text: '票数'
}
}
}
}
};
const myChart = new Chart(ctx, config);
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 设置 X 轴上对应的标签
const data = {
labels: labels,
datasets: [{
label: '我的第一个折线图',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
backgroundColor: ['rgba(179, 0, 33, 0.5)'],// 设置点的填充色
pointStyle: 'circle', //设置点类型为圆点
pointRadius: 6, //设置圆点半径
pointHoverRadius: 10, //设置鼠标移动上去后圆点半径
tension: 0.1
}]
};
const config = {
type: 'line', // 设置图表类型
data: data,
options: {
indexAxis: 'y', // 设置垂直折线图
responsive: true, // 设置图表为响应式
interaction: { // 设置每个点的交互
intersect: false,
},
scales: { // 设置 X 轴与 Y 轴
x: {
beginAtZero: true,// 设置 X 轴从 0 开始
display: true,
title: {
display: true,
text: '日期'
}
},
y: {
display: true,
title: {
display: true,
text: '票数'
}
}
}
}
};
const myChart = new Chart(ctx, config);
尝试一下 »
以上实例输出结果为：