页面加载时，Chartjs 条形图显示为空

如何解决页面加载时，Chartjs 条形图显示为空

我正在使用 ChartJS 库在我的 HTML 页面上显示条形图。我面临的问题是当页面加载时，它显示一个空的条形图，没有我传递给它的数据，也没有渲染条形图。单击图例后，图表会调整大小，我的标签出现在 x 轴上，第二次单击时，条形会呈现，y 轴填充到我传入的数据中。我不确定图表为什么会这样。

我使用 chart.js 文档中提供的代码测试了图表，它立即出现。我认为这个问题与我如何调用我的快速后端以从我的端点检索数据有关。

不确定如何解决此问题。任何帮助表示赞赏。

index.html：

<canvas
      id="patents-per-category-bar-chart"
      width="400"
      height="400"
    ></canvas>
<script type="text/javascript">
      var categoryLabels = [];
      var categoryValues = [];
      var centerLabels = [];
      var centerValues = [];
      $.getJSON("http://localhost:5000/api").done((data) => {

        for (let item in data.patentsPerCategory) {
          if (!data.patentsPerCategory.hasOwnProperty(item)) {
            continue;
          }
          categoryLabels.push(item);
          categoryValues.push(data.patentsPerCategory[item]);
        }

        for (let item in data.patentsPerCenter) {
          if (!data.patentsPerCenter.hasOwnProperty(item)) {
            continue;
          }
          centerLabels.push(item);
          centerValues.push(data.patentsPerCenter[item]);
        }
      });

      var ctx = document
        .getElementById("patents-per-category-bar-chart")
        .getContext("2d");
      var barChartConfig = {
        type: "bar",data: {
          labels: categoryLabels,datasets: [
            {
              backgroundColor: "blue",label: "# Patents Per Category",data: categoryValues,},],options: {
           legend: {
             onClick: null,responsive: true,scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,};
      var categoryBarChart = new Chart(ctx,barChartConfig);
    </script>

从api返回的模拟数据：

{
  "category": {
    "health medicine and biotechnology": 37,"instrumentation": 38,"storage": 30,"systems": 71,"aeronautics": 1,"electronics": 47,"optics": 60,"materials": 119,"undefined": 3,"communications": 32,"sensors": 102,"robotics": 37,"software": 49,"propulsion": 9,"manufacturing": 40,"environment": 24,"aerospace": 79
  }
}

从 api 返回此数据后，我对其进行迭代并将键和值推送到单独的数组中，即 categoryLabels、categoryValues。然后将这些数组直接传入图表的标签和数据中

创建了一个jsfiddle： https://jsfiddle.net/tkdamxr5/2/

它在 jsfiddle 环境中运行良好，所以问题一定出在我使用 jQuery 调用数据的方式上。任何人都可以澄清我需要如何调用我的快速后端来获取数据并将其传递到图表中以使其正常工作？

解决方法

想通了。在我使用的原始代码中

$.getJSON('http://localhost:5000/api').done((data) => {}

调用我的 expressjs 后端。

我改成使用

$.ajax({
url: "http://localhost:5000/api",success: function (result) {
            let labels = [];
            let data = [];
            for (let item in result.category) {
              if (!result.category.hasOwnProperty(item)) {
                continue;
              }
              labels.push(item);
              data.push(result.category[item]);
            }
       },error: function(err) { console.log(err); }
})

并且能够按预期成功显示我的条形图。