如何在Chart.js中动态调用PHP生成的ID实现多图表

你遇到的问题是因为PHP变量与JS语法混写错误，同时JS无法直接通过字符串拼接的方式访问同名变量。下面给你两种可行的解决办法：

方法一：通过window对象访问动态命名的全局变量 #

先让PHP把动态ID正确输出到JS代码中，再利用window对象可通过字符串键访问全局变量的特性获取对应数组。修改后的代码示例：

<?php
$sid = $source_id; // 此处$sid为32、33这类动态数字
?>

<script>    
    const fulltime_<?= $sid ?> = [1, 2, 3, 4, 5];
    const data = {
       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       datasets: [{
          label: 'Weekly Sales',
          data: [18, 12, 6, 9, 12, 3, 9],              
          borderWidth: 1
       }]
    };
    
    const config = {
       type: 'bar',
       data,
       options: {          
          plugins: {             
             tooltip: {
                callbacks: {
                   title: function (context) {
                      console.log(context);    
                      // 通过window对象拼接变量名访问目标数组
                      return window[`fulltime_<?= $sid ?>`][context[0].dataIndex];
                   },
                }
             }
          },
       }
    };
</script>

方法二：用对象统一存储数据（更推荐） #

不要单独定义fulltime_32、fulltime_33这类零散变量，而是用一个对象统一存储所有数据，通过动态键访问，代码更整洁且不易出错：

<?php
$sid = $source_id;
?>

<script>    
    // 用对象统一存储所有fulltime数据，键对应你的动态ID
    const fulltimeData = {
        32: [1, 2, 3, 4, 5],
        33: [6, 7, 8, 9, 10],
        // 其他ID对应的数据...
    };
    
    const data = {
       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       datasets: [{
          label: 'Weekly Sales',
          data: [18, 12, 6, 9, 12, 3, 9],              
          borderWidth: 1
       }]
    };
    
    const config = {
       type: 'bar',
       data,
       options: {          
          plugins: {             
             tooltip: {
                callbacks: {
                   title: function (context) {
                      console.log(context);    
                      // 用PHP输出的$sid作为键访问对象中的数组
                      return fulltimeData[<?= $sid ?>][context[0].dataIndex];
                   },
                }
             }
          },
       }
    };
</script>

另外注意你原代码里的小错误：return return fulltime_32[...] 写了两个return，需要删掉一个。

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