Question

我一直在寻找解决问题的方法，但到目前为止我找到的并不足以让我解决问题。

我已经创建了与MQTT代理的连接，我可以订阅主题并读取和显示数据。我的问题是在收到主题和消息时将数据绘制到图表中。

我创建了一个存储传入主题的数组。

如果我可以得到一些关于我可能做错了什么的反馈，或者如果我使用任何错误的功能，我将不胜感激！在我加载HTML文件时，我收到以下错误消息：

创建图表失败：无法从给定项目中获取上下文

每当我收到来自经纪人的消息时，我都会丢失连接并收到此消息：

* AMQJS0005E内部错误。错误消息：无法读取属性＆＃39; x-axis-0＆＃39;未定义，堆栈跟踪：TypeError：无法读取属性＆＃39; x-axis-0＆＃39;未定义的 error messages

var broker = 'm23.cloudmqtt.com'; // mqtt broker
var port = 35779;                 // websocket port
var topic = 'lubcos/#';           // topic to subscribe to, # for wildcard.

var myChart;
var topicArray = new Array();



// create new Paho MQTT client, connect with broker, port and client id
var client = new Paho.MQTT.Client(broker, port, "client_ID");

client.onMessageArrived = onMessageArrived;
client.onConnectionLost = onConnectionLost;

// ************************************************************************ //

// options for connecting to broker
var connectionOptions = {
  timeout: 3,
  useSSL: true,
  userName: "",
  password: "",
  onSuccess: onConnect,
  onFailure: doFail
};

// ************************************************************************ //

// on connection, print which broker it connectede to and which topic it is subscribing to
function onConnect() {
  console.log("Successfully connected to: " + broker);
  client.subscribe(topic, {qos: 0});
  console.log("Subscribed to: " + topic);
}

// ************************************************************************ //

// if connection failes, print error message
function doFail(message) {
  console.log("Connection failed: " + message.errorMessage);
}

// ************************************************************************ //

// when connection to the broker is lost print error message
// if connection is lost, try to reconnect
function onConnectionLost(responseObject) {
  console.log("connection lost: " + responseObject.errorMessage);
  //window.setTimeout(location.reload(),5000);
};

// ************************************************************************ //

// when message arrives it should print out topic and message to console
// if the index to the topic is < 0, it should push the topic to the array called
// mqttTopics.

function onMessageArrived(message) {
  // print out topic and data to console
  console.log("Topic: " + message.destinationName, ' | ', "Data: " + message.payloadString);

  // check if it is a new topic, if not, add to array
  if (topicArray.indexOf(message.destinationName) < 0){
    // add new topic to array
    topicArray.push(message.destinationName);
    // get the index number
    var y = topicArray.indexOf(message.destinationName);
    console.log("Topic Array: " + topicArray + " | " + "Index number: " + y);

    // create new dadta series for the chart
    var newdata = {
      id: y,
      name: message.destinationName,
      data: []
    };
    // add data to chart
    myChart.update(newdata);
  }


};



// ************************************************************************ //

// checks if the number is really a number
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
};

// ************************************************************************ //

// connect to client by using the information from the option variable
function init() {
  client.connect(connectionOptions);
};

// ************************************************************************ //

function plot(point, chartno) {
  console.log(point);

      var series = myChart.newData[0],

      shift = newData.data.length > 200;

      myChart.update[chartno].addPoint(point, true, shift);

};

// ************************************************************************ //

var graphOptions = {
    responsive: true,
    title: {
        display: true,
        position: "top",
        text: "LubCos H20plus II",
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    },
  scales: {
    xAxis: [{
      type: 'realtime', // x axis will scroll from right to left
      text: 'Time',
      margin: 30
    }],
    yAxis: [{
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'Temp °C / Humidity %',
          margin: 80
      }
    }]
  }
};

// ************************************************************************ //

    var chartData = {
      labels: ["topic"],
      datasets: [{
        label: "Topic",
        data: ["data"],
        fill: false,
        lineTension: 0,
        radius: 2
      }]
    }

// ************************************************************************ //

 $(document).ready(function() {
   var ctx = $("#line-chartcanvas");

   myChart = new Chart(ctx, {
     type: 'line',
     data: chartData,
     options: graphOptions
   });

 });

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Sensor Values MQTT</title>

<link href="css/style.css" rel="stylesheet">

<!-- Include JavaScript classes after which order they are used in -->
<script src="js/jquery.min.js"></script>
<script src="js/chart.min.js"></script>
<!-- Eclipse Paho library for MQTT -->
<script src="js/mqttws31.js"></script>

<script src="js/browserMqtt.js"></script>
<script src="js/mqttGraph.js"></script>

</head>

<body>
<!-- Start connection to the MQTT broker by running init function -->
<body onload="init();">

<!-- Include the chart container and insert the line graph -->
<div class="chart-container">
<canvas>Chart goes here</canvas>
</div>


</body>
</html>

Answer 1

您在第7行定义var chart;。

但是你在函数

中使用变量 myChart

$(document).ready(function () {
       var myChart = new Chart(...)
}

因此使用函数chart.addSeries(...)永远不会有效。

编辑:(根据hardillb的评论）

var myChart;

function onMessageArrived(message){
   ...

    myChart.addSeries(newseries);
}

$(document).ready(function() {
    ...

   //leave the var
    myChart = new Chart(ctx, {...});
});

EDIT2：

第一个错误可能与var ctx = $("#line-chartcanvas");部分有关在HTML中，您需要为画布指定一个与JavaScript代码同名的ID：

<!-- Include the chart container and insert the line graph -->
<div class="chart-container">
    <canvas id=line-chartcanvas>Chart goes here</canvas>
</div>

你的第二个错误似乎来自这个部分：

function onMessageArrived(message) {
  // print out topic and data to console
  console.log("Topic: " + message.destinationName, ' | ', "Data: " + message.payloadString);

  // check if it is a new topic, if not, add to array
  if (topicArray.indexOf(message.destinationName) < 0){
    // add new topic to array
    topicArray.push(message.destinationName);
    // get the index number
    var y = topicArray.indexOf(message.destinationName);
    console.log("Topic Array: " + topicArray + " | " + "Index number: " + y);

    // create new dadta series for the chart
    var newdata = {
      id: y,
      name: message.destinationName,
      data: []
    };
    // add data to chart
    myChart.update(newdata);
  }
};

您正尝试使用myChart.update(newdata);将数据添加到图表中，但它似乎不像Charts.js库所期望的那样作为参数。你也总是传入一个空数据数组。

您应该查看Charts.js文档，了解如何正确使用更新功能： https://www.chartjs.org/docs/latest/developers/updates.html

将MQTT主题和数据添加到chartjs

1 个答案: