CanvasJS Graph中的点存在但不可见

Question

我正在构建一个应用程序来显示传感器数据。它通过websocket接收sensordata。一个组件订阅了websocket，在notify()上，观察者将正确的值推送到一个数组中，该数组随后（应该被）呈现在图形上。但是当调用render()函数时，图中没有任何点出现。

当我在组件接收任何数据之前将点/点插入dataPoints[]数组时，该点确实显示出来。例如，如果我将随机点数组插入ngOnInit()函数中的数组中。

但是一旦数据通过websocket到达，所有其他点都消失，并且收到的点是不可见的。我知道它们在那里，因为如果你将它们悬停在它们上面，它们的坐标就会显示出来，但它们和背景一样白

下面显示了回调函数，其中我将值插入dataPoints数组（在文件的开头声明）

//this is where the component subscribes to the websocket and 
wsSubscription = this.wsService.getObservableWebsocket().subscribe(
      data => {

        this.messageAsObject = JSON.parse(data);
        this.dataPoints.push({x: this.messageAsObject.Content[6],y: this.messageAsObject.Content[8]});
        // correct values are pushed into the dataPoints array 

        this.chart.render();
        //it does render but points are invisible
      },
      err => console.log(err),
      () => console.log("observable stream is over")
     );


  ngOnInit() {          
//example values would be inserted here

  this.chart = new CanvasJS.Chart("chartContainer2", 
  {
    theme : "light1",
    zoomEnabled: true,
    zoomType: "xy",
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: "XZ Distance"
        },
        subtitles:[{
            text: ""
        }],
        data: [
        {
            type: "line",                
            dataPoints: this.dataPoints
    }],
    axisX:{
      title:"X Value",
      minimum: -50,
      maximum: 50,
      gridColor:"black",
      gridThickness: 1    ,
      crosshair : {
        enabled: true,
      },
    },
    axisY:{
      title:"Z Value",
      minimum: -50,
      maximum: 50,
      gridColor:"black",
      gridThickness: 1    ,
      crosshair : {
        enabled: true,
      }
      }

    });

  this.chart.render();
}

我做错了什么 ？

Answer 1

它自己的代码没有什么特别的错误。问题是我试图插入的要点。这些值在0.00000005m到300m之间，但CanvasJS只能显示超过0.2m的点