在折线图中动态显示数据 - ChartJS

问题描述 投票：6回答：3

我需要在一段时间后在我的Angular 6应用程序中的线图中显示一些数据，所以让我们说每个333ms显示一些数据。我正在显示最多30秒注册的数据，因此每个图表数据可以持续最多30秒。它必须从按钮单击开始。

以下是我为测试目的创建的一些测试数据：

test_data = {
        '222': {
            joy: 66.5057373046875,
            fear: 1.0003513832343742,
            anger: 2.000018799044483,
            disgust: 3.004251452162862,
            sadness: 4.0001135088386945,
            contempt: 5.001299204188399,
            surprise: 6.203749045729637
        },
        '238': {
            joy: 97.06363677978516,
            fear: 17.500137131541123,
            anger: 27.00000593749519,
            disgust: 6.001324078417383,
            sadness: 21.000043172625737,
            contempt: 21.00033742573578,
            surprise: 32.62530106306076
        },
        '722': {
            joy: 66.5057373046875,
            fear: 60.000351383234374,
            anger: 70.00001879904448,
            disgust: 10.004251452162862,
            sadness: 92.0001135088387,
            contempt: 40.0012992041884,
            surprise: 50.20374904572964
        },
        '838': {
            joy: 97.06363677978516,
            fear: 15.000137131541123,
            anger: 64.50000593749519,
            disgust: 24.501324078417383,
            sadness: 31.500043172625737,
            contempt: 18.50033742573578,
            surprise: 6.2048268765211105
        },
        '1722': {
            joy: 66.5057373046875,
            fear: 54.000351383234374,
            anger: 72.00001879904448,
            disgust: 0.004251452162861824,
            sadness: 80.0001135088387,
            contempt: 20.0012992041884,
            surprise: 20.203749045729637
        },
        '2838': {
            joy: 95.37223815917969,
            fear: 41.000168004859006,
            anger: 62.00000752212509,
            disgust: 33.001674098544754,
            sadness: 3.000052563053032,
            contempt: 44.00044780407916,
            surprise: 4.204549819231033
        },
        '2839': {
            joy: 98.75503540039062,
            fear: 1.0001062582232407,
            anger: 1.0000043528652895,
            disgust: 1.0009740582900122,
            sadness: 2.000033782198443,
            contempt: 2.0002270473924,
            surprise: 1.2051039338111877
        }
    };

这里，这些值'222'，'238'等是毫秒，这些值需要在图中显示。我构造了这些数据，所以我有这样的数组：

joyArray = {
    data: [66.5057373046875, 97.06363677978516, 66.5057373046875, 97.06363677978516, 66.5057373046875, 95.37223815917969, 98.75503540039062],
    label: '',
    borderColor: 'rgba(255, 217, 40, 1)',
    backgroundColor: 'transparent',
    fill: false
};

// push all arrays into this array to show it on the graph
this.chartData.push(this.joyArray, this.fearArray, this.angerArray, this.disgustArray, this.sadnessArray,
            this.surpriseArray, this.contemptArray);

等等，对于每个对象属性。

我的图表实现如下：

<canvas id="chartCanvas"></canvas>

这就是它的样子：enter image description here

所以我需要点击一个按钮并显示每个帧的这些值（222ms，238ms ......），任何人都知道如何使用chartJS做到这一点？

编辑：改变了数组的结构，现在它是一个内部数据的对象。绘制图表功能如下所示：

drawChart() {
        this.chart = new Chart('chartCanvas', {
            type: 'line',
            data: this.data,
            options: this.options
        });
    }

数据对象：

data = {
    labels: [],
    datasets: [] // datasets = this.chartData;
};
javascript angular chart.js
3个回答
2
投票

test_data = {
    '1222': {
        joy: 66.5057373046875,
        fear: 1.0003513832343742,
        anger: 2.000018799044483,
        disgust: 3.004251452162862,
        sadness: 4.0001135088386945,
        contempt: 5.001299204188399,
        surprise: 6.203749045729637
    },
    '2238': {
        joy: 97.06363677978516,
        fear: 17.500137131541123,
        anger: 27.00000593749519,
        disgust: 6.001324078417383,
        sadness: 21.000043172625737,
        contempt: 21.00033742573578,
        surprise: 32.62530106306076
    },
    '3722': {
        joy: 66.5057373046875,
        fear: 60.000351383234374,
        anger: 70.00001879904448,
        disgust: 10.004251452162862,
        sadness: 92.0001135088387,
        contempt: 40.0012992041884,
        surprise: 50.20374904572964
    },
    '4838': {
        joy: 97.06363677978516,
        fear: 15.000137131541123,
        anger: 64.50000593749519,
        disgust: 24.501324078417383,
        sadness: 31.500043172625737,
        contempt: 18.50033742573578,
        surprise: 6.2048268765211105
    },
    '5722': {
        joy: 66.5057373046875,
        fear: 54.000351383234374,
        anger: 72.00001879904448,
        disgust: 0.004251452162861824,
        sadness: 80.0001135088387,
        contempt: 20.0012992041884,
        surprise: 20.203749045729637
    },
    '6838': {
        joy: 95.37223815917969,
        fear: 41.000168004859006,
        anger: 62.00000752212509,
        disgust: 33.001674098544754,
        sadness: 3.000052563053032,
        contempt: 44.00044780407916,
        surprise: 4.204549819231033
    },
    '7839': {
        joy: 98.75503540039062,
        fear: 1.0001062582232407,
        anger: 1.0000043528652895,
        disgust: 1.0009740582900122,
        sadness: 2.000033782198443,
        contempt: 2.0002270473924,
        surprise: 1.2051039338111877
    }
};

var arr = Object.entries(test_data)


var options = {
    type: 'line',
    data: {
        labels: ["joy", "fear", "anger", "disgust", "sadness", "contempt", "surprise"],
        datasets: []
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    reverse: false
                }
            }]
        }
    }
}




var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myC = new Chart(ctx, options);


arr.forEach((v) => {
    setTimeout(() => {


        myC.data.datasets.push({
            data: [v[1].joy, v[1].fear, v[1].anger, v[1].disgust, v[1].sadness, v[1].contempt, v[1].surprise],
            label: "#" + v[0] + "Milisec"
        });
        myC.update()
    }, parseInt(v[0]))
})
canvas { background-color : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
0
投票

我知道您希望每xx ms更新一次新的json数据视图，您需要：

  • 有一个服务，暴露共享的可观察量，比如数据$;
  • 该服务具有获取远程数据并更新上面的共享observable的方法，比如getRemoteData（）
  • 该服务Observable.interval（）调用该方法来获取远程数据
  • 让你的组件显示数据
  • 让组件订阅服务中可观察的数据。

下一个示例代码说明了如何实现它

import {takeWhile, first} from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { interval } from "rxjs";
import { PositionsModel } from "./positionsmodel";
import { MouvementService } from './mouvement.service';

@Component({
  selector: 'app-mouvementview',
  template: '<div *ngIf="data"> your chart </div>',
})

export class MouvementviewComponent implements OnInit {
  public data: PositionsModel;
  private display: boolean; // whether to display info in the component
                            // use *ngIf="display" in your html to take
                            // advantage of this
  private alive: boolean; // used to unsubscribe from the IntervalObservable
                          // when OnDestroy is called.
  results : string;
  // Inject mouvementService
  constructor(private mouvementService: MouvementService) {
    this.display = false;

    }

ngOnInit() {
   this.mouvementService.getPositions().pipe(
      first()) // only gets fired once
      .subscribe((data) => {
        this.data = data;
        this.display = true;
        this.alive = true;
});

// get our data every subsequent 200 mseconds
interval(200).pipe(
      takeWhile(() => this.alive)) // only fires when component is alive
      .subscribe(() => {
        this.mouvementService.getPositions()
          .subscribe(data => {
        console.log(data);
        this.data = data;
          });
      });

}

ngOnDestroy(){
    this.alive = false; // switches your IntervalObservable off
  }
}
0
投票

你可以使用Chart.js的addData()函数和setTimeout方法。

<!DOCTYPE html>
<html>
    <head>
         <title>Add data</title>
         <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
    </head>
    <body>      
        <div class = "container">
            <canvas id="myChart"></canvas>            
        </div>
        <script src = "script.js"></script>
    </body>
</html>

的script.js

let ctx = document.getElementById("myChart").getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [7, 9, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

        setTimeout(function() {
            addData(myChart, "White", 7);
        },3000);

        function addData(chart, label, data) {
            console.log(console.log(chart.data.datasets[0].data));
            chart.data.labels.push(label);
            chart.data.datasets[0].data.push(data);
            chart.update();
        }

希望这可能会有所帮助。如果您希望以间隔（例如每2秒）向图表添加数据，则可以将setTimeout更改为setInterval。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.