个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
看起来问题有 2 个部分。第 1 部分已解决，但留给 future 的人
第 1 部分
所以我正在尝试将数据从我的微 Controller 流式传输到具有实时图表的网站。
我从一个简单的 index.html 页面开始，使用 plotlyjs 创建一个使用随机数的实时图表 - 它奏效了。
然后我创建了一个 index.js 文件并继续并启动代码以将数据流式传输，我使用了 nodejs express socketio 并且我设法让数据实时显示在本地主机 3000 上的控制台上。
所以我将我的 nodejs index.js 页面链接到我的 index.html 页面，现在我可以看到标题，但我再也看不到图表了。
如果我在没有 index.js 的情况下直接查看我的 html 页面，我可以看到带有随机数的图表，但如果我使用我的真实流数据 index.js 文件查看它，我只能看到标题。
我不确定为什么会这样。
index.html文件代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="plotly.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<meta charset="utf-8" />
<title>My Plot Page</title>
</head>
<body>
<p>Plotly plot:</p>
<div id="chart1"></div>
<script>
const socket = io();
var counter = 0;
function getX() {
counter++;
return counter;
}
function getY() {
socket.on('msp432 : data', function (data) {
return data.value;
})
return 0;
}
Plotly.plot('chart1', [{
x: [],
y: [],
type: 'line'
}]);
setInterval(function () {
Plotly.extendTraces('chart1', { x: [[getX()]] , y: [[getY()]] }, [0])
}, 500);
</script>
</body>
</html>
现在我使用 inspect element 进入控制台，我可以在那里看到我的所有结果，但它显示错误:
Script from http://localhost:3000/plotly.min.js was blocked due to mime type mismatch
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). GET - http://localhost:3000/plotly.min.js
0: 'Plotly' is not defined
我该如何解决这个问题？
我也可以根据要求显示 index.js 文件我不希望问题太长
第 2 部分
所以现在我可以通过使用 index.js 在页面上使用 cdn plotly 链接来查看图表，但我看到的都是 0。
我认为是因为这部分代码:
function getY() {
socket.on('msp432 : data', function (data) {
return data.value;
})
return 0;
}
看起来它只返回 0 而不是 data.value。如果我执行 console.log(data.toString()) 它会在控制台上显示正确的数字，但现在不能像这样工作
我的 index.js 代码:
const express = require('express');
const socketIO = require('socket.io');
const http = require('http');
const app = express();
const server = http.createServer(app);
const io = socketIO.listen(server);
io.on('connection', function (socket) {
console.log('a new socket connection');
});
app.get('/', (req, res, next) => {
res.sendFile(__dirname + '/index.html');
});
const SerialPort = require('serialport');
const myPort = new SerialPort('COM5', {
baudRate: 9600
})
myPort.on('open', function () {
console.log("opened the port")
})
myPort.on('data', function (data) {
console.log('Data:', data.toString());
io.emit('msp432 : data', {
value: data.toString()
});
});
server.listen(3000, () => {
console.log("server on port ", 3000);
})
最佳答案
尝试从他们的 CDN 加载它:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
第 2 部分:
将套接字事件处理程序移到同步 getY 函数之外:
let yVal = 0;
socket.on('msp432 : data', function (data) {
yVal = data.value;
})
function getY() {
return yVal;
}
关于javascript - Nodejs Plotlyjs 单独工作但不能一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56989187/
25
4
0
嘿，我正在使用plotlyjs 来绘制弯曲正方形的面积图。我想要达到的最终结果是这样的: 我正在尝试使用plotlyjs库达到上述结果。我创建了 3 个正方形，每个正方形都有不同的颜色:绿色、黄色和红
我正在尝试手动设置类别轴的长度。详细来说，我希望 x 轴的长度等于 y 轴的长度。到目前为止，我尝试了 plotly manual 中的不同布局设置没有结果。 var layout = { wid
如果我有一个 unix 时间戳作为我的 x 轴，我如何格式化 x 轴刻度以便它们是人类可读的。示例: var x = [ 1599149438, 1599152204, 1599159972,
看起来问题有 2 个部分。第 1 部分已解决，但留给 future 的人 第 1 部分 所以我正在尝试将数据从我的微 Controller 流式传输到具有实时图表的网站。 我从一个简单的 index.
我需要分享一个使用 Julia 中的 PlotlyJS 包制作的交互式绘图。根据 PlotlyJS.jl 包的文档，我需要使用“savehtml”函数并将“js”参数设置为“:embed”以便离线查看
以下是我使用 PlotlyJS 绘制响应图的 js 代码。 var trace1 = { x: ['Category A', 'Category B', 'Category C', 'Catego
我正在尝试使用 ES6 模块实现 PlotlyJS ( last version )，如下所示: index.html 主要.js import * as Plotly from './plotly
我想在 PlotlyJS 中填充到特定的 Y 值。这是我从 PlotlyJS 文档中得到的:Fiddle { "x": [ "2016-01-31T00:03:57.000Z",
我是一名优秀的程序员,十分优秀！