JavaScript中数据库查询结果无法赋值给图表series.data的问题求助

这是因为数据库查询是异步操作：你初始化options时，connection.query的回调函数还没执行，valArray仍是空数组；等回调里把数据存入数组时，options已经初始化完成，自然无法拿到新数据。

方案1：将图表逻辑放入查询回调中 #

直接在数据库查询完成后，再生成图表配置并初始化图表：

connection.query(
  `SELECT COUNT(productId) AS NumberOfProducts , productId FROM cart GROUP BY productId ORDER BY productId DESC LIMIT 12`,
  (err, res) => {
    if (err) {
      console.error(err);
      return;
    }
    // 直接从查询结果生成数据数组，替代for循环更简洁
    const valArray = res.map(item => item.NumberOfProducts);
    // 在这里生成图表配置
    const options = {
      chart: {
        height: 360,
        type: "bar",
        stacked: true,
        toolbar: { show: false },
        zoom: { enabled: true },
      },
      plotOptions: {
        bar: { horizontal: false, columnWidth: "15%", endingShape: "rounded" },
      },
      dataLabels: { enabled: false },
      series: [
        {
          name: "Series A",
          data: valArray,
        },
      ],
      xaxis: {
        categories: [
          "Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ],
      },
      colors: ["#556ee6", "#f1b44c", "#34c38f"],
      legend: { position: "bottom" },
      fill: { opacity: 1 },
    };
    // 这里执行图表初始化（以ApexCharts为例）
    // new ApexCharts(document.querySelector("#chart"), options).render();
  }
);

方案2：用Async/Await封装，让代码更易读 #

把异步查询封装成Promise，再用async函数按同步逻辑执行：

// 封装数据库查询为Promise
function getProductCounts() {
  return new Promise((resolve, reject) => {
    connection.query(
      `SELECT COUNT(productId) AS NumberOfProducts , productId FROM cart GROUP BY productId ORDER BY productId DESC LIMIT 12`,
      (err, res) => {
        if (err) reject(err);
        else resolve(res.map(item => item.NumberOfProducts));
      }
    );
  });
}

// 异步初始化图表
async function initChart() {
  try {
    const valArray = await getProductCounts();
    const options = {
      chart: {
        height: 360,
        type: "bar",
        stacked: true,
        toolbar: { show: false },
        zoom: { enabled: true },
      },
      plotOptions: {
        bar: { horizontal: false, columnWidth: "15%", endingShape: "rounded" },
      },
      dataLabels: { enabled: false },
      series: [
        {
          name: "Series A",
          data: valArray,
        },
      ],
      xaxis: {
        categories: [
          "Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ],
      },
      colors: ["#556ee6", "#f1b44c", "#34c38f"],
      legend: { position: "bottom" },
      fill: { opacity: 1 },
    };
    // 执行图表初始化
    // new ApexCharts(document.querySelector("#chart"), options).render();
  } catch (err) {
    console.error(err);
  }
}

// 调用初始化函数
initChart();

• 必须确保图表初始化逻辑在数据库查询完成后执行，这是异步场景的核心要求
• 用map替代for循环生成数据数组，代码更简洁高效
• 错误处理不要用throw console.log(err)，改用console.error并终止流程，避免程序崩溃

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