CanvasJS Graph 中的点存在但不可见

Question

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

当我在组件接收任何数据之前将 point/points 插入 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 的点

CanvasJS Graph 中的点存在但不可见

Points inside CanvasJS Graph are existing but invisible

angular

websocket

canvasjs