如何从JSON接口获取table_count数据并填充到柱状图中？

别担心，我来帮你一步步搞定这个数据传递的问题。核心就是从API返回的JSON里取出table_count值，替换掉柱状图data数组里对应位置的内容就行，具体步骤如下：

1. 正确提取table_count数值 #

首先，你的API返回的JSON里table_count是字符串类型（值为"2"），我们需要先把它转成数字。在获取到解析后的JSON对象后，这样提取：

// 从JSON结构中获取table_count并转为数字，加默认值避免解析失败
const tableCount = parseInt(
  this.dashboard_service.dashboard_details.big_data_warehouse.distribution.warehouse.hive.database.table_count,
  10
) || 0;

2. 匹配柱状图的data数组长度 #

你的labels是["Hive", "HBase", "Cubes"]，对应三个类别，所以data数组长度要和labels一致（原来的[5,55]只有两个元素，会导致第三个类别"Cubes"无数据）。我们把Hive对应的第一个位置换成tableCount，另外两个可以保留默认值或按需调整：

data: [tableCount, 55, 0] // HBase保留原55，Cubes设为0，可根据需求修改

3. 优化现有代码的小问题 #

你的代码里有两处可以修正的细节：

• 重复判断response.status === 200，第一层判断后无需再次检查
• response.json()已经是解析后的对象，不需要额外JSON.parse()操作，否则会报错

修改后的完整代码片段 #

getDashboardDetail() {
  this.loaderService.display(true);
  const headers = new Headers({
    'Authorization': localStorage.getItem('Token'),
    'Content-Type': 'application/json'
  });
  const options = new RequestOptions({
    headers: headers
  });
  this.service.get(options, services.dashboard_service).subscribe((response) => {
    if (response.status === 200) {
      // 直接解析response为JSON对象
      this.dashboard_service = response.json();
      this.loaderService.display(false);
      
      // 提取并转换table_count数值
      const tableCount = parseInt(
        this.dashboard_service.dashboard_details.big_data_warehouse.distribution.warehouse.hive.database.table_count,
        10
      ) || 0;

      const barCtx = $("#chart-bar")[0].getContext('2d');
      const dataBar = {
        labels: ["Hive", "HBase", "Cubes"],
        datasets: [{
          label: "Count",
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1,
          // 替换为API获取的tableCount，对应Hive位置
          data: [tableCount, 55, 0]
        }]
      };

      new Chart(barCtx, {
        type: "bar",
        data: dataBar,
        options: {
          scales: {
            xAxes: [{
              stacked: true
            }],
            yAxes: [{
              stacked: true
            }]
          }
        }
      });
    }
  }, (err) => {
    // 别忘了处理错误，隐藏加载器并打印错误信息
    this.loaderService.display(false);
    console.error('获取仪表盘数据失败:', err);
  })
}

关键注意点 #

• 确保this.dashboard_service的层级和API返回的JSON结构完全匹配，这里用了dashboard_details最外层节点
• 必须把字符串类型的table_count转为数字，否则Chart.js会把它当作字符串处理，导致图表显示异常
• 保持data数组长度和labels一致，避免图表渲染出现问题

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