Question

我正在将Angular 8与ng2-charts一起使用

我有一个看起来像这样的JSON解析有效载荷

... device_id：“ abcdef” mqtttime：1583865244943 顺序：110 经度：-88 纬度：42 车站：9455 ie_load：7 温度：21.86 压力：100140 照片：0.712 加速：262.136 正确地：0.04 加速：1.008 加速：262.13794109208993 ...

有效负载可以包含一组可变的参数。

相对于有效负载，我知道与该JSON有效负载关联的参数（键），我想从中提取

的值

keys = [“ temp”，“ photo”，“ pres”]如果需要的话可以作为字典

这里的想法是使用（键）中的信息来

创建一个循环，该循环将用于解析JSON有效负载
提取与该键相关的值
创建适当的数据集/标签组合
推送数据并更新图表。

在这种情况下，图表可以是多轴折线/条形图。

到目前为止我尝试过的是

...@Input() keys: any[];  <-- this is where I get the keys to be looked into the myObject below

 @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;

  public ChartLabels: string = "temp"; //

  public lineChartData: Array<number> = [];

  public lineChartLabels: Array<any> = [];

  // XAxis - Time Series
  public ChartData: Array<any> = [
    { data: this.lineChartData, label: this.ChartLabels },
  ];


  SubscribeToTopic(): void {

        this.subscription = this.mqttService
      .observe(this.ULtopicname)
      .subscribe((message: IMqttMessage) => {
        var _myObject = JSON.parse(message.payload.toString());
        var variable_names = {};

        /****** Push data to Chart ******/
        const _lineChartData = this.lineChartData;
        const _lineChartLabels = this.lineChartLabels;
        const _ChartLabels = this.ChartLabels;
        _lineChartData.push(_myObject.temp); // extract key values
        _lineChartLabels.push(Date.now()); //
        if (this.lineChartData.length > 20) {
          this.lineChartData.splice(0, 1);
          this.lineChartLabels.splice(0, 1);
        }
        this.lineChartData = _lineChartData;
        this.lineChartLabels = _lineChartLabels;
        console.log(this.lineChartData);
        this.chart.update();
      });
}

ChartJS动态创建多个数据集和标签

0 个答案: