javascript - 如何修复 JavaScript 中的 'ids is not a function' 错误

标签 javascript chartist.js

我的最终目标是使用chartist.js中的数组数据来创建仪表板。我是 javascript 和编程的初学者,我确实知道我需要为图表添加变量。我的第一个目标是在继续之前添加更多 console.log 以查看数组。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>first chart</title>
</head>
<body>
<div id="chart" class="ct-golden-section"></div> 
<script>

fetch('https://script.google.com/macros/s/AKfycbxY1tXSC6zbwvRc330EfyBNKgE0YiLWXx6p868uJh2d/dev')

    .then(function(response) {
        return response.json();
    })
    //.then(data => console.log(data))
//declare the data variable   
    var data = {
      //set our labels (x-axis) to the Label values from the JSON data
      labels: ids.map(function(id) {
        return id.Date;
      }),
      //set our values to Value value from the JSON data
      series: ids.map(function(id) {
        return id.Weight;
      })
    };

</script>

</body>
</body>
</html>
</body>
</html>

最佳答案

查看发回的 JSON 数据后,我发现您尝试错误地访问数据(使用 map )。相反,您希望直接访问其结构内的每个数组(即:权重 > 日期、权重 > 权重)。有时您需要分析收到的对象以检索正确的数据

其次,查看您在评论中发布的链接后,您似乎错过了一段关键代码.then(function(ids))。完整功能如下所示:

fetch('https://script.google.com/macros/s/AKfycbxY1tXSC6zbwvRc330EfyBNKgE0YiLWXx6p868uJh2d/dev')

    .then(function(response) {
        return response.json();
    })
    .then(function(ids) {  //Code that is required
        var data = {
            //set our labels (x-axis) to the Label values from the JSON data
            labels: ids.weight.Date,        //Retrieve relevant array
            //set our values to Value value from the JSON data
            series: ids.weight.Weight       //Retrieve relevant array
    }
  });

当它调用.then(function(ids))时,它会等待上一个语句执行,然后将上一个调用的返回值作为变量ids传递。在您的代码中,从未定义 ids 。

关于javascript - 如何修复 JavaScript 中的 'ids is not a function' 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56014094/

相关文章:

javascript - 如何为函数定义 Typescript 接口(interface)?

Chartist.js - 工具提示中的点值和 X 标签?

javascript - 使用图表师在条形图中的图例对齐

javascript - 如何使用 v-for 在每个元素中呈现不同的 CSS 类

javascript - 如何在带有填充颜色的折线图上添加带断点的区域

javascript - 检测 video.load 是否成功 - javascript

javascript - 如何向 snapengage 按钮添加数据属性

javascript - 当我调整页面大小时,我的菜单和标题移动,我做错了什么?

javascript - 将 HTML 元素添加到 vue 模板

javascript - Chrome 浏览器中的字体系列 "Arial black"解析问题