js报表实现

使用原生JavaScript实现报表

创建HTML结构用于展示报表数据，通过JavaScript动态生成表格内容。示例代码展示如何将数据数组渲染为表格：

// 示例数据
const reportData = [
  { id: 1, name: '产品A', sales: 1500 },
  { id: 2, name: '产品B', sales: 2100 },
  { id: 3, name: '产品C', sales: 800 }
];

function generateReport() {
  const table = document.createElement('table');
  table.className = 'report-table';

  // 创建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  Object.keys(reportData[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 创建表格内容
  const tbody = document.createElement('tbody');
  reportData.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  document.getElementById('report-container').appendChild(table);
}

使用Chart.js实现可视化报表

安装Chart.js库后创建数据可视化图表。以下示例展示如何创建柱状图报表：

import Chart from 'chart.js/auto';

const ctx = document.getElementById('salesChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [{
      label: '销售额',
      data: [12000, 19000, 15000, 18000],
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

使用DataTables实现交互式报表

引入DataTables库创建功能丰富的交互式表格报表。示例代码展示基本实现：

$(document).ready(function() {
  $('#report-table').DataTable({
    ajax: {
      url: '/api/report-data',
      dataSrc: ''
    },
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'department' },
      { data: 'score' }
    ],
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  });
});

报表数据格式化处理

对报表数据进行格式化显示，增加可读性。示例展示数值和日期的格式化方法：

function formatReportData(data) {
  return data.map(item => {
    return {
      ...item,
      sales: formatCurrency(item.sales),
      date: formatDate(item.date),
      progress: renderProgressBar(item.progress)
    };
  });
}

function formatCurrency(value) {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(value);
}

function formatDate(dateString) {
  return new Date(dateString).toLocaleDateString('zh-CN');
}

响应式报表设计

使用CSS媒体查询确保报表在不同设备上正常显示：

.report-table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  .report-table thead {
    display: none;
  }

  .report-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }

  .report-table td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  .report-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

报表数据导出功能

实现将报表数据导出为各种格式的功能：

function exportToExcel(data, fileName) {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, `${fileName}.xlsx`);
}

function exportToPDF(tableId, fileName) {
  const element = document.getElementById(tableId);
  html2pdf()
    .from(element)
    .save(fileName);
}