Java中的实时图表JS从传感器获取数据； Chart.js：创建图表失败：无法从给定项目中获取上下文

Question

我正在尝试使用chart.js绘制实时图表。 sesnor提供实时数据，将其更新以绘制在图表上。我已按照文档中提供的步骤进行了添加或更新数据，但它向我显示了错误：Chart.js：无法创建图表：无法从给定项目中获取上下文，[[C0 ]我正在使用构造函数实现新的类（makeChart），其中在构造函数内定义了图表对象和图表实例。接下来是同一类中的addData方法，此方法在refresh类（另一个名为Dashbaord的类）中调用。假设使用AddData方法以文档中给出的相同格式更新数据，这些都在一个名为dashboard.js的Java文件中。要绘制图表的画布位于单独的HTML文件dashbaord.html中。

控制台显示ctx和canvas等于null。

当（this.testChart.update（）;）分解时，在不同的行显示错误：

1- this.makeChart =新的makeChart;

2- that.makeChart.addData（result.particles.PM0_3）; //刷新

3- this.testChart =新图表（ctx，{//在图表实例处

4- this.testChart.update（）; // chart.js提供的更新方式

评论this.testChart.update（）;在this.makeChart = new makeChart;和this.testChart = new Chart（ctx，{）处给出错误，这是未绘制图表的主要原因。

我怀疑错误与两个类之间的联系有关，因为当我尝试在第一类中绘制图表时，它可以工作，但没有来自传感器的实时数据和更新的时间。我将在下面发布Java代码以及dashboard.html行以绘制图表。

期待您的帮助，对于此处的冗长帖子深表歉意。我很感激...

dashboard.js代码：

check image please

}

class Dashboard {
   constructor(jsonRPC, auth){

    this.jsonRPC = jsonRPC;
    this.auth = auth;
    this.updateInterval = 10;                //every 10 seconds
    this.makeChart = new makeChart;

}

run() {

    var that = this;
    that.jsonRPC.call('extension.get', {'select':'data'}).then(function (result) {

    //Initialize Device Infos
    $('#tab_info').load('html/dashboard.html #content', function(){
    $(".GaugeMeter").gaugeMeter();// Initialize GaugeMeter plugin

        //Start Data Refresh Cycle
        that.refresh();
    });
  });
}

refresh() { 
    var that = this;
    that.jsonRPC.call('extension.get', {'select':'data'}).then(function (result) {
    that.makeChart.addData(result.particles.PM0_3);

    });

    //Wait 1 seconds before checking state
    setTimeout(function(){
       that.refresh();
    }, this.updateInterval * 1000);
 }

dashboard.html调用画布的位置如下：

 class makeChart{
    constructor(){
    //Chart Objects
        var ctx =  'testChart';
        //var ctx = document.getElementById('testChart');


    //Chart configurations
        var commonOptions = {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series',
                time:  {
                displayFormats:
                {
                second: 'h:mm:ss a'
                },
                unit:'second'
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        legend: {display: false},
        tooltips:{
            enabled: true
        }
    };

    //Chart instance
        this.testChart = new Chart (ctx,{
        type: 'line',
        data: {
        labels: [],                             //x axis
        datasets: [{
            label: "Particles Number10",          //change for each conc and part no
            data: [],                            //y axis
            fill: false,
            borderColor: '#343e9a',
            borderWidth: 1
        }]
     },
        options: Object.assign({}, commonOptions, {
        title:{
            display: true,
            text: "Particles Number10",          //change for each conc and part no
            fontSize: 18
            },
            maintainAspectRatio: false,
            responsive: false,
        })
     });
    console.log(this.testChart);

  };                                             //end of constructor


    addData (data) {

        if(data) {
    var today = new Date();
    var time =  today.getDate() +'/'+ (today.getMonth()+1)+ '/'+ today.getFullYear() +' '+ 
    today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    var chart_numberElements = 60;
    var chart_updateCount = 0;

    this.testChart.data.labels.push(time);
    this.testChart.data.datasets.push(data);

        if(chart_updateCount > chart_numberElements){
            this.testChart.data.labels.shift();
            this.testChart.data.datasets.shift();
        } else chart_updateCount++;

        //this.testChart.destroy();
        //this.testChart.update();

      }
    };
};

我得到的全部而不是图表是此处图像显示的

 <div class="modal-body">
   <canvas id="testChart" width="800" height="400"></canvas>
   </div>

Answer 1

Chart.js在初始化时需要一个chart seen元素。您似乎已经知道了这一点，因为您拥有正确的代码，但已将其注释掉并替换为字符串：

<canvas>

简单地扭转这些以使其起作用：

var ctx =  'testChart';
//var ctx = document.getElementById('testChart');

当然，您需要确保

//var ctx =  'testChart';
var ctx = document.getElementById('testChart');

元素在运行时出现在DOM中。