流量数据图组件
流量数据图组件用于可视化展示网络流量、用户访问统计等数据，支持多种图表类型和数据映射方式，适用于数据分析和监控场景。
基础折线图
基础的折线图用于展示连续的数据变化趋势，适合展示一段时间内的流量变化。
注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。
HTML
<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('lineChart').getContext('2d');
// 准备数据
const data = {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: [{
label: '网络流量 (GB)',
data: [65, 59, 80, 81, 56, 55, 72],
fill: false,
borderColor: '#2468f2',
tension: 0.4
}]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '流量 (GB)'
}
},
x: {
title: {
display: true,
text: '月份'
}
}
}
};
// 创建图表
const lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
</script>柱状图
柱状图用于比较不同类别的数据，适合显示各时间段或各类别数据的对比。
HTML
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('barChart').getContext('2d');
// 准备数据
const data = {
labels: ['页面浏览', '用户访问', 'API调用', '文件下载', '视频播放'],
datasets: [{
label: '本周流量统计 (GB)',
data: [120, 85, 65, 45, 98],
backgroundColor: [
'rgba(36, 104, 242, 0.7)',
'rgba(74, 137, 254, 0.7)',
'rgba(111, 168, 254, 0.7)',
'rgba(148, 198, 255, 0.7)',
'rgba(185, 222, 255, 0.7)'
],
borderColor: [
'rgb(36, 104, 242)',
'rgb(74, 137, 254)',
'rgb(111, 168, 254)',
'rgb(148, 198, 255)',
'rgb(185, 222, 255)'
],
borderWidth: 1
}]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '流量 (GB)'
}
}
}
};
// 创建图表
const barChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
});
</script>饼图
饼图用于展示数据构成的比例关系，适合展示不同来源流量的占比情况。
HTML
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('pieChart').getContext('2d');
// 准备数据
const data = {
labels: ['搜索引擎', '直接访问', '社交媒体', '邮件推广', '合作伙伴'],
datasets: [{
data: [35, 25, 22, 10, 8],
backgroundColor: [
'rgba(36, 104, 242, 0.7)',
'rgba(74, 137, 254, 0.7)',
'rgba(111, 168, 254, 0.7)',
'rgba(148, 198, 255, 0.7)',
'rgba(185, 222, 255, 0.7)'
],
borderColor: [
'rgb(36, 104, 242)',
'rgb(74, 137, 254)',
'rgb(111, 168, 254)',
'rgb(148, 198, 255)',
'rgb(185, 222, 255)'
],
borderWidth: 1
}]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: '访问来源分布'
}
}
};
// 创建图表
const pieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
});
</script>多系列数据对比
将多个数据系列绘制在同一个图表中，方便进行对比分析，适合比较不同时期或不同类型的流量数据。
HTML
<div class="chart-container">
<canvas id="multiSeriesChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('multiSeriesChart').getContext('2d');
// 准备数据
const data = {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [
{
label: '本周流量',
data: [65, 59, 80, 81, 56, 40, 30],
borderColor: '#2468f2',
backgroundColor: 'rgba(36, 104, 242, 0.2)',
fill: true
},
{
label: '上周流量',
data: [45, 70, 60, 75, 70, 50, 20],
borderColor: '#ff6384',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: true
}
]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '流量 (GB)'
}
}
},
plugins: {
title: {
display: true,
text: '本周与上周流量对比'
}
}
};
// 创建图表
const multiSeriesChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
</script>实时数据图表
实时更新的数据图表，适合展示实时监控的流量数据。
HTML
<div class="chart-container">
<canvas id="realtimeChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('realtimeChart').getContext('2d');
// 初始数据
const initialData = {
labels: Array.from({length: 30}, (_, i) => i.toString()),
datasets: [{
label: '实时流量 (Mbps)',
data: Array.from({length: 30}, () => Math.floor(Math.random() * 50) + 20),
borderColor: '#2468f2',
backgroundColor: 'rgba(36, 104, 242, 0.2)',
fill: true,
tension: 0.4
}]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '流量 (Mbps)'
}
},
x: {
display: false
}
},
plugins: {
title: {
display: true,
text: '实时流量监控'
},
legend: {
display: true
}
},
elements: {
point: {
radius: 0
}
},
animation: {
duration: 300
}
};
// 创建图表
const realtimeChart = new Chart(ctx, {
type: 'line',
data: initialData,
options: options
});
// 模拟实时数据更新
function updateChart() {
// 移除第一个数据点
realtimeChart.data.labels.shift();
// 添加新的标签
realtimeChart.data.labels.push((parseInt(realtimeChart.data.labels[realtimeChart.data.labels.length - 1]) + 1).toString());
// 移除第一个数据
realtimeChart.data.datasets[0].data.shift();
// 添加新数据
realtimeChart.data.datasets[0].data.push(Math.floor(Math.random() * 50) + 20);
// 更新图表
realtimeChart.update();
}
// 每秒更新一次
const interval = setInterval(updateChart, 1000);
// 页面卸载时清除定时器
window.addEventListener('beforeunload', function() {
clearInterval(interval);
});
});
</script>自定义样式图表
根据需求自定义图表样式，包括颜色、字体、背景等，提升图表的视觉效果。
HTML
<div class="chart-container">
<canvas id="customStyleChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取Canvas元素
const ctx = document.getElementById('customStyleChart').getContext('2d');
// 渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(36, 104, 242, 0.8)');
gradient.addColorStop(1, 'rgba(36, 104, 242, 0.1)');
// 准备数据
const data = {
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
datasets: [{
label: '昨日流量',
data: [30, 15, 62, 85, 98, 75, 40],
fill: true,
backgroundColor: gradient,
borderColor: '#2468f2',
pointBackgroundColor: '#fff',
pointBorderColor: '#2468f2',
pointRadius: 5,
pointHoverRadius: 7,
tension: 0.4
}]
};
// 配置选项
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(200, 200, 200, 0.2)'
},
ticks: {
font: {
family: "'HTML5', sans-serif",
size: 12
},
color: '#666'
}
},
x: {
grid: {
color: 'rgba(200, 200, 200, 0.2)'
},
ticks: {
font: {
family: "'HTML5', sans-serif",
size: 12
},
color: '#666'
}
}
},
plugins: {
legend: {
labels: {
font: {
family: "'HTML5', sans-serif",
size: 14
},
color: '#333'
}
},
title: {
display: true,
text: '24小时流量监控',
font: {
family: "'HTML5', sans-serif",
size: 18,
weight: 'bold'
},
color: '#333',
padding: 20
}
}
};
// 创建图表
const customStyleChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
</script>API
流量数据图组件的属性和方法。基于Chart.js库实现，可自定义配置。
| 属性/方法 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 图表类型，可选值为line、bar、pie、doughnut、radar等 | string | line |
| data | 图表的数据配置，包含labels和datasets | object | - |
| options | 图表的选项配置，包含responsive、scales、plugins等 | object | - |
| update() | 更新图表数据和配置的方法 | function | - |
| destroy() | 销毁图表实例的方法 | function | - |
| toBase64Image() | 将图表转换为Base64编码图片的方法 | function | - |
| getDatasetMeta() | 获取数据集元数据的方法 | function | - |
| canvas | 图表的Canvas DOM元素 | HTMLCanvasElement | - |