如何用JavaScript实现Excel原生可交互联动图表？

我需要在Excel中实现原生可交互图表：鼠标悬停显示对应数据，表格数据变更时图表自动更新。目前用Chart.js和XLSX库写的代码只能把图表导出成图片放进Excel，没法实现Excel原生的交互效果，求指导修改代码满足需求。

原代码如下：

原JavaScript代码 #

function exportToExcel() {
    var table = document.getElementById('myTable');
    var chartCanvas = document.getElementById('myChart');
    var ctx = chartCanvas.getContext('2d');

    // Extract data from table
    var data = [];
    for (var i = 1; i < table.rows.length; i++) {
        var row = table.rows[i];
        data.push({
            month: row.cells[0].innerText,
            revenue: parseFloat(row.cells[1].innerText)
        });
    }

    // Create chart
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.map(function(item) { return item.month; }),
            datasets: [{
                label: 'Revenue',
                data: data.map(function(item) { return item.revenue; }),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Generate Excel file
    var wb = XLSX.utils.book_new();
    var ws = XLSX.utils.table_to_sheet(table);

    // Add chart image to Excel
    var chartDataUrl = chartCanvas.toDataURL("image/png");
    var chartDataBinary = dataURItoBlob(chartDataUrl);
    XLSX.utils.book_append_sheet(wb, ws, "Data");
    XLSX.writeFile(wb, 'chart_with_data.xlsx');
}

// Function to convert data URI to blob
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
}

原HTML代码 #

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Chart in Excel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>10000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>12000</td>
    </tr>
    <tr>
      <td>March</td>
      <td>15000</td>
    </tr>
  </tbody>
</table>
<canvas id="myChart" width="400" height="400"></canvas>
<button onclick="exportToExcel()">Download Excel</button>

SheetJS（你用的XLSX库）只能处理数据和图片导出，没法创建Excel原生图表。要实现带交互、能随数据更新的原生图表，得换成ExcelJS库，它支持直接在Excel文件里创建绑定数据的原生图表。

修改后的完整代码 #

HTML部分 #

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导出原生Excel交互图表</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>10000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>12000</td>
    </tr>
    <tr>
      <td>March</td>
      <td>15000</td>
    </tr>
  </tbody>
</table>
<canvas id="myChart" width="400" height="400"></canvas>
<button onclick="exportToExcel()">下载Excel</button>

JavaScript部分 #

async function exportToExcel() {
    const table = document.getElementById('myTable');
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Data');

    // 把网页表格的数据导入Excel工作表
    const headerRow = worksheet.addRow([table.rows[0].cells[0].innerText, table.rows[0].cells[1].innerText]);
    headerRow.font = { bold: true }; // 表头加粗
    for (let i = 1; i < table.rows.length; i++) {
        const row = table.rows[i];
        worksheet.addRow([row.cells[0].innerText, parseFloat(row.cells[1].innerText)]);
    }

    // 创建Excel原生柱状图
    const chart = worksheet.addChart('bar', {
        title: { text: '月度营收' },
        xAxis: {
            title: { text: '月份' },
            labels: { values: worksheet.getColumn(1).values.slice(1) } // 跳过表头，取月份数据
        },
        yAxis: {
            title: { text: '营收' },
            min: 0 // Y轴从0开始
        },
        series: [
            {
                name: '营收',
                values: worksheet.getColumn(2).values.slice(1) // 跳过表头，取营收数据
            }
        ]
    });

    // 设置图表在工作表中的位置（从B4单元格开始，占10行8列）
    chart.topLeftCell = 'B4';
    chart.bottomRightCell = 'I14';

    // 导出Excel文件
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, '营收数据图表.xlsx');
}

关键说明 #

• 替换库的原因：ExcelJS支持直接创建Excel原生图表，而SheetJS只能导出图片，没法实现交互和数据联动。
• 数据绑定：图表直接引用Excel工作表中的列数据，Excel会自动建立关联，修改表格里的数据时，图表会自动更新。
• 原生交互：生成的图表具备Excel自带的交互功能，比如鼠标悬停显示数据标签、拖拽调整图表大小、修改样式等。

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