如何将jQuery获取的操作次数变量数据可视化成饼图？

我有一段jQuery代码，能从HTML表格里筛选并提取特定操作（Update、HardDelete、SoftDelete、Create等）的可见行出现次数，目前已经把这些数据展示在页面元素里了。现在需要把这些变量数据做成饼图，试了很多示例代码，但不知道怎么从现有的jQuery逻辑里拿动态数据替换示例里的固定值。

原jQuery代码：

function no(){

     var input, filter, table, tr, td, cell, i, j;
     filter = document.getElementById("searchInput").value.toLowerCase();

    table = document.getElementById("table1");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
      tr[i].style.display = "none";
      const tdArray = tr[i].getElementsByTagName("td");
      for (var j = 0; j < tdArray.length; j++) {
        const cellValue = tdArray[j];
        if (cellValue && cellValue.innerHTML.toLowerCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        }
      }
    }

      var update = $('table tr:contains(Update):visible').length;
      update = "Update occurnces: " + update;
      document.getElementById("update").innerHTML = update;

      var HardDelete= $('#table1').find('tr:contains(HardDelete):visible').length;

      var SoftDelete = $('table tr:contains(SoftDelete):visible').length;
      var Create = $('table tr:contains(Create):visible').length;
      Create = "Create occurnces: " + Create;
      document.getElementById("Create").innerHTML = Create;

      var SoftHDelete = $('table tr:contains(SoftDelete):visible,tr:contains(HardDelete):visible').length;
      SoftHDelete = "Soft And Hard Delete occurnces: " + SoftHDelete +  " <br> " +"<br>" + SoftDelete +": "+ " is SoftDeleted And " + " ' " + HardDelete + " ' " + " HardDeleted ";
      document.getElementById("demosh").innerHTML = SoftHDelete;

      var Copy = $('table tr:contains(Copy):visible').length;
      Copy = "Copy occurnces: " + Copy;
      document.getElementById("Copy").innerHTML = Copy;
      
      var MoveToDeletedItems = $('table tr:contains(MoveToDeletedItems):visible').length;
      MoveToDeletedItems = "MoveToDeletedItems occurnces: " + MoveToDeletedItems;
      document.getElementById("MoveToDeletedItems").innerHTML = MoveToDeletedItems;

      var Move = $('table tr:contains(Move):visible').length;
      Move = "Move occurnces: " + Move;
      document.getElementById("Move").innerHTML = Move;

    }

1. 整理饼图所需的数据结构 #

先修改原函数的变量命名逻辑，把数值和展示字符串分开存储（避免变量复用导致的数据丢失），再将统计结果整理成图表库可识别的标签+数值数组：

// 替换原变量赋值逻辑，单独存储数值
const updateCount = $('table tr:contains(Update):visible').length;
document.getElementById("update").innerHTML = `Update occurnces: ${updateCount}`;

const HardDelete= $('#table1').find('tr:contains(HardDelete):visible').length;

const SoftDelete = $('table tr:contains(SoftDelete):visible').length;
const CreateCount = $('table tr:contains(Create):visible').length;
document.getElementById("Create").innerHTML = `Create occurnces: ${CreateCount}`;

const SoftHDelete = $('table tr:contains(SoftDelete):visible,tr:contains(HardDelete):visible').length;
document.getElementById("demosh").innerHTML = `Soft And Hard Delete occurnces: ${SoftHDelete} <br><br>${SoftDelete}: is SoftDeleted And '${HardDelete}' HardDeleted`;

const CopyCount = $('table tr:contains(Copy):visible').length;
document.getElementById("Copy").innerHTML = `Copy occurnces: ${CopyCount}`;

const MoveToDeletedItems = $('table tr:contains(MoveToDeletedItems):visible').length;
document.getElementById("MoveToDeletedItems").innerHTML = `MoveToDeletedItems occurnces: ${MoveToDeletedItems}`;

const MoveCount = $('table tr:contains(Move):visible').length;
document.getElementById("Move").innerHTML = `Move occurnces: ${MoveCount}`;

// 整理饼图数据，过滤掉次数为0的操作
const chartData = [
  { label: 'Update', value: updateCount },
  { label: 'HardDelete', value: HardDelete },
  { label: 'SoftDelete', value: SoftDelete },
  { label: 'Create', value: CreateCount },
  { label: 'Copy', value: CopyCount },
  { label: 'MoveToDeletedItems', value: MoveToDeletedItems },
  { label: 'Move', value: MoveCount }
].filter(item => item.value > 0);

2. 添加饼图容器与图表库引入 #

在HTML页面中添加canvas元素作为饼图载体：

<canvas id="operationPieChart" width="400" height="400"></canvas>

引入Chart.js（无需跳转外部网站，直接使用CDN脚本）：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. 编写饼图渲染与更新逻辑 #

声明全局变量存储饼图实例，避免重复渲染导致的冲突：

let pieChart = null;

编写渲染函数，支持初始化和动态更新饼图：

function renderPieChart(data) {
  const ctx = document.getElementById('operationPieChart').getContext('2d');
  
  // 销毁已有实例，防止重复渲染
  if (pieChart) {
    pieChart.destroy();
  }

  pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: data.map(item => item.label),
      datasets: [{
        label: '操作次数',
        data: data.map(item => item.value),
        backgroundColor: [
          '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF'
        ],
        hoverOffset: 4
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
        },
        tooltip: {
          callbacks: {
            label: ctx => `${ctx.label}: ${ctx.raw} 次`
          }
        }
      }
    }
  });
}

4. 在筛选函数中触发饼图更新 #

在no()函数的最后调用渲染函数，传入整理好的动态数据：

// 渲染/更新饼图
renderPieChart(chartData);

完整修改后的代码 #

let pieChart = null;

function no(){
     var input, filter, table, tr, td, cell, i, j;
     filter = document.getElementById("searchInput").value.toLowerCase();

    table = document.getElementById("table1");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
      tr[i].style.display = "none";
      const tdArray = tr[i].getElementsByTagName("td");
      for (var j = 0; j < tdArray.length; j++) {
        const cellValue = tdArray[j];
        if (cellValue && cellValue.innerHTML.toLowerCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        }
      }
    }

      const updateCount = $('table tr:contains(Update):visible').length;
      document.getElementById("update").innerHTML = `Update occurnces: ${updateCount}`;

      const HardDelete= $('#table1').find('tr:contains(HardDelete):visible').length;

      const SoftDelete = $('table tr:contains(SoftDelete):visible').length;
      const CreateCount = $('table tr:contains(Create):visible').length;
      document.getElementById("Create").innerHTML = `Create occurnces: ${CreateCount}`;

      const SoftHDelete = $('table tr:contains(SoftDelete):visible,tr:contains(HardDelete):visible').length;
      document.getElementById("demosh").innerHTML = `Soft And Hard Delete occurnces: ${SoftHDelete} <br><br>${SoftDelete}: is SoftDeleted And '${HardDelete}' HardDeleted`;

      const CopyCount = $('table tr:contains(Copy):visible').length;
      document.getElementById("Copy").innerHTML = `Copy occurnces: ${CopyCount}`;
      
      const MoveToDeletedItems = $('table tr:contains(MoveToDeletedItems):visible').length;
      document.getElementById("MoveToDeletedItems").innerHTML = `MoveToDeletedItems occurnces: ${MoveToDeletedItems}`;

      const MoveCount = $('table tr:contains(Move):visible').length;
      document.getElementById("Move").innerHTML = `Move occurnces: ${MoveCount}`;

      // 整理饼图数据
      const chartData = [
        { label: 'Update', value: updateCount },
        { label: 'HardDelete', value: HardDelete },
        { label: 'SoftDelete', value: SoftDelete },
        { label: 'Create', value: CreateCount },
        { label: 'Copy', value: CopyCount },
        { label: 'MoveToDeletedItems', value: MoveToDeletedItems },
        { label: 'Move', value: MoveCount }
      ].filter(item => item.value > 0);

      // 渲染饼图
      renderPieChart(chartData);
}

function renderPieChart(data) {
  const ctx = document.getElementById('operationPieChart').getContext('2d');
  
  if (pieChart) {
    pieChart.destroy();
  }

  pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: data.map(item => item.label),
      datasets: [{
        label: '操作次数',
        data: data.map(item => item.value),
        backgroundColor: [
          '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF'
        ],
        hoverOffset: 4
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
        },
        tooltip: {
          callbacks: {
            label: ctx => `${ctx.label}: ${ctx.raw} 次`
          }
        }
      }
    }
  });
}

注意事项 #

• 确保页面已引入jQuery，否则原代码的$选择器无法生效。
• 若不需要过滤次数为0的操作，可移除.filter(item => item.value > 0)代码。
• 可根据需求修改饼图的颜色、尺寸、图例位置等配置项。

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