如何在JavaScript中将数组结果引用到Chart.js数据集

问题根源 #

1. 图表初始化时机过早：页面加载时就创建了Chart实例，但此时还未调用GetListItems获取数据，图表只能使用初始的随机数据
2. MyDataset是onSuccess函数的局部变量，外部无法直接访问，直接替换初始data里的数组会报错
3. 标签与统计数据顺序不匹配：原labels是['New', 'Completed', 'Inproccess']，但统计顺序是New、In Process、Completed，会导致数据对应错位

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button onclick="GetListItems();" type="button">Get All List Items​</button>
<div>
  <canvas id="myChart"></canvas>
</div>

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

<script>
  let myChart; // 声明全局图表实例变量

  function GetListItems() {
    var url = "https://contoso.sharepoint.com/sites/Mysite/_api/web/lists/getByTitle('Mylist')/items?$top=500";
    $.ajax({
      url: url,
      type: "GET",
      headers: {
        "accept": "application/json; odata=verbose"
      },
      success: onSuccess
    });
  }

  function onSuccess(data) {
    var items = data.d.results;
    const MyDataset = [];

    // 按labels顺序统计数据，保证对应关系正确
    var NewItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "New";
    });
    var CompItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "Completed";
    });
    var InProcItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "In Process";
    });
    
    MyDataset.push(NewItems.length);
    MyDataset.push(CompItems.length);
    MyDataset.push(InProcItems.length);
    
    // 获取数据后更新图表
    updateChart(MyDataset);
  }

  const labels = ['New', 'Completed', 'In Process'];

  function updateChart(datasetData) {
    const data = {
      labels: labels,
      datasets: [{
        label: '项目状态统计',
        backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 206, 86)'],
        borderColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 206, 86)'],
        data: datasetData,
        borderWidth: 1
      }]
    };

    const config = {
      type: 'bar',
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              stepSize: 1 // 确保y轴显示整数，符合项目数量逻辑
            }
          }
        }
      }
    };

    // 如果图表已存在，先销毁再重新创建，避免重复渲染
    if (myChart) {
      myChart.destroy();
    }
    myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
  }
</script>

关键修复点说明 #

• 全局图表实例：把myChart声明为全局变量，方便在数据获取完成后控制图表的创建与销毁
• 数据与标签对齐：调整统计顺序，让MyDataset的元素顺序和labels完全对应，解决数据错位问题
• 动态更新图表：创建updateChart函数，在获取到SharePoint数据后再调用该函数初始化或更新图表，确保图表使用最新统计数据
• 优化显示效果：给不同状态的柱子设置差异化颜色，同时设置y轴从0开始、步长为1，符合项目数量的整数特性

内容的提问来源于stack exchange，提问作者hime-da-bimes