J'ai besoin d'afficher des données dans mon graphique linéaire dans mon application Angular 6, après un certain temps, disons donc toutes les 333 ms pour afficher des données. J'affiche des données enregistrées en 30 secondes maximum, donc chaque donnée graphique peut durer au maximum 30 secondes. Il faut commencer par un clic sur un bouton.
Voici quelques données de test que j'ai créées juste à des fins de test:
data = {
labels: [],
datasets: [] // datasets = this.chartData;
};
Ici, ces valeurs '222', '238' etc, sont des millisecondes où ces valeurs doivent être affichées dans le graphique. J'ai structuré ces données pour avoir des tableaux comme celui-ci:
drawChart() {
this.chart = new Chart('chartCanvas', {
type: 'line',
data: this.data,
options: this.options
});
}
et ainsi de suite, pour chaque propriété d'objet.
Mon graphique est implémenté comme ceci:
<canvas id="chartCanvas"></canvas>
Voici à quoi cela ressemble:
Je dois donc cliquer sur un bouton et afficher ces valeurs pour chaque image (222ms, 238ms ...), tout le monde a une idée de comment faire cela en utilisant chartJS?
EDIT: a changé la structure des tableaux, maintenant c'est un objet avec des données à l'intérieur. La fonction de graphique de dessin ressemble à ceci:
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);
Objet de données:
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
}
};
3 Réponses :
<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>
canvas { background-color : #eee;
}
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]))
})
Hmm, c'est proche, mais ce dont j'ai besoin est un peu différent, maintenant vous avez dessiné toute la ligne après un certain temps. Ce dont j'ai besoin, c'est d'afficher chacun de ces objets dans les données de test après autant de millisecondes - exemple: après 1222 ms, afficher le premier objet, après 2328, afficher le deuxième objet ... Le graphique a donc un certain flux, comme une vidéo, vous passez en secondes et montrer des émotions
utilisez quelque chose comme cet exemple: jsfiddle.net/therowf/jp48kb5L
Je ne sais pas comment structurer mes données comme les données que vous avez fournies dans cet exemple: /
Je comprends que vous souhaitez mettre à jour la vue avec de nouvelles données json fraîches toutes les xx ms en résumé, vous devez:
l'exemple de code suivant montre comment l'implémenter
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
}
}
Je comprends ce que vous dites, j'ai essayé de faire quelque chose de similaire mais cela n'a pas fait le travail pour moi: / Je ne sais pas comment implémenter votre code avec ma structure de données honnêtement, j'aurais besoin de montrer la première valeur de chaque tableau d'émotions pour chaque image, je ne sais pas comment faire comme ça
Vous pouvez utiliser la fonction addData () de Chart.js avec une méthode setTimeout pour cela.
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();
}
script.js
<!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>