我正在try 从我的raspberry pi加载一个由两列组成的csv文件—时间和温度—并用chartjs制作一个图表.在一些教程中,我发现我可以用d3做到这一点,但似乎我对promise 做了一些错误的事情.

var csv = `
21:34:03,17.25
21:35:04,17.18
21:36:03,17.18
21:37:03,17.18
21:38:03,17.18
21:39:03,17.18
21:40:03,17.18
21:41:03,17.12
21:42:03,17.18
21:43:03,17.12
21:44:03,17.12
21:46:03,17.12
21:47:02,17.12
21:48:03,17.12
21:49:02,17.12
21:50:03,17.06
21:51:03,17.06
21:52:03,17.06
21:53:03,17.06
21:54:03,17.06
21:55:04,17.06
21:56:03,17.06
21:57:02,17.06
21:58:03,17.06
22:00:04,17.00
22:01:02,17.00`;

//couldn't find a way to embed the csv into  the text function for the snippet

d3.text("temp.csv").then(makeChart);

function makeChart(temp) {
  var result = "x, y\n" + temp; //now you have the header
  var datos = d3.csvParse(result);
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: datos.x,
      datasets: [{
        data: datos.y
      }]
    }
  });
  console.log(this.chart.data);
  return this.chart;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>

示例数据(应为临时csv):

21:34:03,17.25
21:35:04,17.18
21:36:03,17.18
21:37:03,17.18
21:38:03,17.18
21:39:03,17.18
21:40:03,17.18
21:41:03,17.12
21:42:03,17.18
21:43:03,17.12
21:44:03,17.12
21:46:03,17.12
21:47:02,17.12
21:48:03,17.12
21:49:02,17.12
21:50:03,17.06
21:51:03,17.06
21:52:03,17.06
21:53:03,17.06
21:54:03,17.06
21:55:04,17.06
21:56:03,17.06
21:57:02,17.06
21:58:03,17.06
22:00:04,17.00
22:01:02,17.00

我不知道还需要添加什么,但我发现的唯一解决方法是完全go 掉d3,尽管我想了解如何在这个示例中使用它的promise .

推荐答案

您的promise 是可以的(即d3.text("temp.csv").then(makeChart);),但您在makeChart中的逻辑有几个问题:

  1. 删除您添加的标题中,y之间的空格-否则它将创建一个像这样的对象键" y",而不仅仅是y
  2. y个值需要转换为float,因为csvParse默认为文本值,没有转换函数
  3. datos.xdatos.y不引用任何内容,因为datos没有特定的xy键-它是一个对象数组,每个对象都有xy键.因此,可以使用map来提取这些键的数组

工作示例如下:

var url = "https://gist.githubusercontent.com/robinmackenzie/ff787ddb871cef050d7e6279991a0f07/raw/4ce35de3a9bef27363d83e7da2f3365ffa8d2345/data.csv";

d3.text(url)
  .then(csv => makeChart(csv))
  
function makeChart(temp) {
  // add the header (no space between , and y
  var result = "x,y\n" + temp; //now you have the header

  // csv parse - need to convert y values to float
  var datos = d3.csvParse(result, d => {
    return {
      x: d.x,
      y: parseFloat(d.y)
    }
  });

  // render chart
  var chart = new Chart('chart', {
    type: 'line',
    data: {
      labels: datos.map(d => d.x), // <-- just get x values
      datasets: [{
        data: datos.map(d => d.y) // <-- just get y values
      }]
    }
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="100"></canvas>

Javascript相关问答推荐

Node.JS ws包中是否有Webocket的错误代码列表?

脚本.js:3:20未捕获的类型错误:无法读取空的属性(读取addEventHandler)

如何解决这个未能在响应上执行json:body stream已读问题?

RxJS setTimeout操作符等效

node TS:JWT令牌签名以验证客户端和后台问题之间的身份验证

jQuery提交按钮重新加载页面,即使在WordPress中使用preventDefault()

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

自定义高图中的x轴标签序列

如何从html元素创建树 struct ?

CheckBox作为Vue3中的一个组件

setcallback是什么时候放到macrotask队列上的?

阿波罗返回的数据错误,但在网络判断器中是正确的

使用LocaleCompare()进行排序时,首先使用大写字母

将异步回调转换为异步生成器模式

为什么在函数中添加粒子的速率大于删除粒子的速率?

为列表中的项目设置动画

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

通过跳过某些元素的对象进行映射

P5JS-绘制不重叠的圆

本地损坏的Java脚本