如何用CSV文件填充Volt Bootstrap 5 Dashboard仪表盘？

步骤1：准备CSV数据文件 #

创建一个CSV文件（例如sales-data.csv），格式匹配图表需要的标签和数值。推荐两种格式：

格式一：行对应标签/数据 #

Mon,Tue,Wed,Thu,Fri,Sat,Sun
0,10,30,40,80,60,100

格式二：每行一条数据 #

day,value
Mon,0
Tue,10
Wed,30
Thu,40
Fri,80
Sat,60
Sun,100

步骤2：读取并解析CSV数据 #

使用Fetch API异步读取CSV文件，将文本解析为Chartist需要的labels和series数组。以下是两种格式对应的解析代码：

解析格式一的代码 #

async function loadChartData() {
  try {
    // 请求CSV文件
    const response = await fetch('sales-data.csv');
    const csvText = await response.text();
    
    // 分割行并过滤空行
    const rows = csvText.split('\n').filter(row => row.trim() !== '');
    // 第一行作为标签数组
    const labels = rows[0].split(',');
    // 第二行转成数值数组作为系列数据
    const seriesData = rows[1].split(',').map(Number);
    
    return { labels, series: [seriesData] };
  } catch (error) {
    console.error('加载/解析CSV失败:', error);
    // 解析失败时返回硬编码数据作为降级方案
    return {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [[0, 10, 30, 40, 80, 60, 100]]
    };
  }
}

解析格式二的代码 #

async function loadChartData() {
  try {
    const response = await fetch('sales-data.csv');
    const csvText = await response.text();
    
    const rows = csvText.split('\n').filter(row => row.trim() !== '');
    const labels = [];
    const seriesData = [];
    
    // 跳过表头，遍历数据行提取标签和数值
    for (let i = 1; i < rows.length; i++) {
      const [day, value] = rows[i].split(',');
      labels.push(day);
      seriesData.push(Number(value));
    }
    
    return { labels, series: [seriesData] };
  } catch (error) {
    console.error('加载/解析CSV失败:', error);
    return {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [[0, 10, 30, 40, 80, 60, 100]]
    };
  }
}

步骤3：用解析后的数据初始化图表 #

修改原有的硬编码代码，改为异步加载数据后初始化Chartist图表：

document.addEventListener('DOMContentLoaded', async function() {
  const d = document;
  if(d.querySelector('.ct-chart-sales-value')) {
    // 加载并获取解析后的CSV数据
    const chartData = await loadChartData();
    
    // 初始化Chartist折线图
    new Chartist.Line('.ct-chart-sales-value', chartData, {
      low: 0,
      showArea: true,
      fullWidth: true,
      plugins: [
        Chartist.plugins.tooltip()
      ],
      axisX: {
        position: 'end',
        showGrid: true
      },
      axisY: {
        showGrid: false,
        showLabel: false,
        labelInterpolationFnc: function(value) {
          return '$' + (value / 1) + 'k';
        }
      }
    });
  }
});

关键注意事项 #

• 确保CSV文件路径正确，若不在同一目录需调整fetch的路径参数。
• 本地开发时建议用Live Server等工具运行页面，避免浏览器跨域限制。
• 可根据实际CSV结构扩展解析逻辑，比如处理异常值、多列数据等。

内容的提问来源于stack exchange，提问作者Lostguy97