Точки внутри CanvasJS Graph существуют, но невидимы - PullRequest
Новая
       3

Точки внутри CanvasJS Graph существуют, но невидимы

0 голосов
/ 13 февраля 2019

Я создаю веб-приложение, которое должно показывать данные датчика.он получает сенсорные данные через веб-сокет.Компонент подписывается на веб-сокет, в notify() наблюдатель помещает правильные значения в массив, который впоследствии (как предполагается, будет) отображен на графике.Но когда вызывается функция render(), внутри графика не отображаются точки.

Когда я вставляю точку / точки в массив dataPoints[] до того, как компонент получит какие-либо данные, точка действительно появится.Например, если я вставлю массив случайных точек в массив в функции ngOnInit().

Но как только данные поступают через веб-сокет, все остальные точки исчезают, а полученные точки становятся невидимыми.Я знаю, что они есть, потому что, если вы наведите на них курсор, их координаты будут показаны, но они будут такими же белыми, как фон

Ниже показана функция обратного вызова, в которую я вставляю значения в массив 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();
}

что я сделал не так?

1 Ответ

0 голосов
/ 13 февраля 2019

В самом коде нет ничего плохого.Проблема была в пунктах, которые я пытался вставить.Значения были от 0,00000005м до 300м, но CanvasJS может показывать только точки свыше 0,2м

...