Chart.js饼图/环形图显示异常的解决方案咨询

正在开发一个数据可视化网站，流程为用户选择数据及图表类型后，由PHP返回数据，前端通过Chart.js生成图表。采用模块化设计提升复用性，但饼图/环形图显示异常，仅呈现带数字的矩形块，折线图、气泡图等其他图表可正常显示。

生成图表的JavaScript代码：

function makeChart(ctx, response, selectedColumn) {
    if (myChart) {
        myChart.destroy();
    }
    const chartTypeValue = chartTypeSelect.value;
    const labels = response.map(item => item['Hour']);
    const data = response.map(item => {
        const value = item[selectedColumn];
        return isNaN(value) ? value : parseFloat(value);
    });
    myChart = new Chart(ctx, {
    type: chartTypeValue,
    data: {
      labels: labels,
      datasets: [{
        label: `Data for ${selectedColumn}`,
        data: data,
        backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
        ],
        }]
    }      
    }
      );
      return myChart;
    }

PHP返回的数据结构（var_dump输出）：

array(26280) {
  [0]=>
  array(2) {
    ["Hour"]=>
    string(1) "0"
    ["DogID"]=>
    string(9) "CANINE001"
  }
  [1]=>
  array(2) {
    ["Hour"]=>
    string(1) "1"
    ["DogID"]=>
    string(9) "CANINE001"
  }
  [2]=>
  array(2) {
    ["Hour"]=>
    string(1) "2"
    ["DogID"]=>
    string(9) "CANINE001"
  }

问题根源 #

饼图/环形图的数据逻辑和线性图表完全不同：

• 饼图需要分类统计后的数值数据（比如不同DogID的出现次数），而非折线图那样的序列数据
• 当前传入的data是大量重复的字符串（如CANINE001），Chart.js无法将字符串解析为饼图所需的数值，导致渲染异常
• 当前的labels是Hour序列，和饼图需要的分类标签（如不同DogID）不匹配

修复步骤 #

1. 添加饼图数据预处理函数
   针对饼图/环形图做分组统计，将原始数据转换为Chart.js需要的格式：

   function processPieData(response, selectedColumn) {
       const countMap = {};
       response.forEach(item => {
           const key = item[selectedColumn];
           countMap[key] = (countMap[key] || 0) + 1;
       });
       return {
           labels: Object.keys(countMap),
           data: Object.values(countMap)
       };
   }
   

2. 修改makeChart函数适配饼图
   根据图表类型选择对应的数据处理逻辑：

   function makeChart(ctx, response, selectedColumn) {
       if (myChart) {
           myChart.destroy();
       }
       const chartTypeValue = chartTypeSelect.value;
       let labels, data;
   
       // 区分饼图/环形图与其他图表的数据处理
       if (chartTypeValue === 'pie' || chartTypeValue === 'doughnut') {
           const processed = processPieData(response, selectedColumn);
           labels = processed.labels;
           data = processed.data;
       } else {
           // 原有线性图表的处理逻辑
           labels = response.map(item => item['Hour']);
           data = response.map(item => {
               const value = item[selectedColumn];
               return isNaN(value) ? value : parseFloat(value);
           });
       }
   
       myChart = new Chart(ctx, {
           type: chartTypeValue,
           data: {
               labels: labels,
               datasets: [{
                   label: `Data for ${selectedColumn}`,
                   data: data,
                   backgroundColor: [
                       'rgb(255, 99, 132)',
                       'rgb(255, 159, 64)',
                       'rgb(255, 205, 86)',
                       'rgb(75, 192, 192)',
                       'rgb(54, 162, 235)',
                       'rgb(153, 102, 255)',
                       'rgb(201, 203, 207)'
                   ],
               }]
           }      
       });
       return myChart;
   }
   

3. 可选优化
   如果分类数量超过预设的颜色数组长度，可动态生成颜色避免重复：

   function generateColors(count) {
       const colors = [];
       for (let i = 0; i < count; i++) {
           const hue = (i * 360 / count) % 360;
           colors.push(`hsl(${hue}, 70%, 60%)`);
       }
       return colors;
   }
   

   替换datasets中的backgroundColor：backgroundColor: generateColors(labels.length),

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