Chart.js - 如何在绘制图表之前显示加载动画

Question

我正在使用chart.js插件绘制线状图表。 我希望在绘制图表之前显示加载中。

我尝试了以下方法，但没有任何反应。 这里显示jQuery错误：

未捕获的引用错误：progress未定义

但在我的应用程序中没有显示错误。

如何在绘制图表之前显示动画或加载？ 我正在使用semantic-ui作为CSS框架。

new Chart(document.getElementById("line-chart"),{
  type: 'line',
  data:{
    labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
    datasets: [{
        data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      },{
        data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      },{
        data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      },{
        data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      },{
        data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options:{
    title:{
      display: true,
      text: 'World population per region (in millions)'
    },
    animation:{
      onProgress: function (animation){
        progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="line-chart" ></canvas>

- Omi

Answer 1

看起来你是基于chartjs文档中的动画回调部分的代码。

那段代码只是部分代码。页面上的链接已经失效，但这里是正确的完整代码：进度条示例

在onProgress属性中定义的函数会在图表动画的每一步调用，因此用于填充进度条。导致你遇到未定义错误的progress变量应该在你的代码之前定义好。在Github链接上，它位于第#26行。

- Raquel Guimarães

Answer 2

你现在看到的代码 - chart.js 的“进度条”示例，是用于在绘制图表时显示动画的进度条。

你需要在数据加载时显示进度条，这是不同的事情。因此，你正在查看错误的代码。

chart.js 中的动画是用于绘制图表，而不是获取数据，这是用户问题，你可以在各处找到许多示例代码。

- philw

---

你在说OP正在看错误的代码，但你并没有告诉他们应该去哪里找。因此，这不是一个好的回答。 - jrswgtr

OP已经将数据集嵌入到代码中，因此他并没有特别谈论“数据加载”延迟问题。 - Ε Г И І И О

你能告诉我在从URL获取数据时如何找到正确的代码来显示加载GIF吗？ - Hexark