Je veux accéder à tous les index d'un tableau pour afficher chacun d'eux dans une variable différente pour générer un graphique AmChart
for (var i = 0; i < fieldsArrays.length; i++) {
var innerArrayLength = fieldsArrays[i].length;
for (var j = 0; j < innerArrayLength; j++) {
console.log(fieldsArrays[i][j]);
}
}
// This displays only one line in the graph. Each index should have it's own line in the AmChart graph
chart.data = fieldsArrays[0];
J'ai essayé une boucle for mais je ne suis pas sûr si c'est la bonne manière:
let fieldsArrays = [[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }],
[{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }],
[{ timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }],
];
3 Réponses :
Vous pouvez essayer ceci:
<script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv"></div>
Exemple en direct:
let fieldsArrays = [
[{
timeAxe: "2019-1-27 0:44:47",
fieldsArrays: 1
}],
[{
timeAxe: "2019-1-27 0:45:18",
fieldsArrays: 200
}],
[{
timeAxe: "2019-1-27 0:47:19",
fieldsArrays: 2500
}],
];
const chart = am4core.create("chartdiv", am4charts.XYChart);
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
const lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "fieldsArrays";
lineSeries.dataFields.dateX = "timeAxe";
lineSeries.name = "Fields Arrays";
lineSeries.tensionX = 0.8;
var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.tooltipText = "{name}: [bold]{valueY}[/]";
// Legend
chart.legend = new am4charts.Legend();
chart.data = fieldsArrays.flatMap(([{timeAxe, fieldsArrays}]) => ({ timeAxe: new Date(timeAxe), fieldsArrays }));
chart.data = fieldsArrays.flatMap(([{timeAxe, fieldsArrays}]) => ({ timeAxe: new Date(timeAxe), fieldsArrays }));
C'est vraiment de spéculer sur ce que le PO cherche ... Pourtant, vous avez peut-être raison. :-)
@Alex Et maintenant?
Essayez ceci,
let fieldsArrays = [[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }],
[{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }],
[{ timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }],
];
let display_each_index_available_in_fieldsArrays = [];
for (var i = 0; i < fieldsArrays.length; i++) {
var innerArrayLength = fieldsArrays[i].length;
for (var j = 0; j < innerArrayLength; j++) {
display_each_index_available_in_fieldsArrays.push(fieldsArrays[i][j]);
}
}
console.log(display_each_index_available_in_fieldsArrays);
Merci pour la suggestion. Je l'ai essayé mais le comportement est comme .flat () Ce code doit être utilisé dans la bibliothèque AmChart pour générer un graphique. Dans ce graphique, j'ai besoin de tous ces index séparément si c'est possible.
Vous avez déjà remarqué que vous ne pouvez pas simplement affecter votre variable fieldArrays directement à chart.data et faire apparaître plusieurs lignes à partir de celui-ci. AmCharts ne prend en charge qu'un tableau aplati d'objets, pas un tableau de tableaux (notez que chacune de nos démos de base est un tableau aplati). AmCharts ne peut pas déduire plusieurs lignes à partir d'un tableau de tableaux, vous devez donc créer des objets série pour chaque ligne que vous avez l'intention d'afficher à partir de votre ensemble de données et indiquer à ces objets série comment interpréter les données de votre tableau aplati.
Il existe deux approches pour afficher plusieurs lignes de vos données.
1) En utilisant chart.data , vous devez aplatir / combiner et remapper votre tableau de tableaux de sorte que les valeurs de vos sous-tableaux correspondent à leurs propres propriétés de propriété de champ de valeur individuelle pour chaque série (ligne). Étant donné:
<script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>
Cela doit devenir quelque chose comme ceci:
#chartdiv {
width: 100%;
height: 500px;
} Chaque objet de série aura la valeur Y (ou la valeur X) correspondent à la propriété fieldArrays qui lui est associée:
var fieldArrays = [
[
{
"timeAxe": "2019-07-26",
"fieldArrays": 13
},
{
"timeAxe": "2019-07-27",
"fieldArrays": 12
},
{
"timeAxe": "2019-07-28",
"fieldArrays": 14
},
{
"timeAxe": "2019-07-29",
"fieldArrays": 11
},
{
"timeAxe": "2019-07-30",
"fieldArrays": 10
},
{
"timeAxe": "2019-07-31",
"fieldArrays": 10
},
{
"timeAxe": "2019-08-01",
"fieldArrays": 12
},
{
"timeAxe": "2019-08-02",
"fieldArrays": 15
},
{
"timeAxe": "2019-08-03",
"fieldArrays": 12
},
{
"timeAxe": "2019-08-04",
"fieldArrays": 12
}
],
[
{
"timeAxe": "2019-07-26",
"fieldArrays": 29
},
{
"timeAxe": "2019-07-27",
"fieldArrays": 30
},
{
"timeAxe": "2019-07-28",
"fieldArrays": 25
},
{
"timeAxe": "2019-07-29",
"fieldArrays": 30
},
{
"timeAxe": "2019-07-30",
"fieldArrays": 30
},
{
"timeAxe": "2019-07-31",
"fieldArrays": 30
},
{
"timeAxe": "2019-08-01",
"fieldArrays": 25
},
{
"timeAxe": "2019-08-02",
"fieldArrays": 22
},
{
"timeAxe": "2019-08-03",
"fieldArrays": 23
},
{
"timeAxe": "2019-08-04",
"fieldArrays": 24
}
],
[
{
"timeAxe": "2019-07-26",
"fieldArrays": 31
},
{
"timeAxe": "2019-07-27",
"fieldArrays": 45
},
{
"timeAxe": "2019-07-28",
"fieldArrays": 35
},
{
"timeAxe": "2019-07-29",
"fieldArrays": 36
},
{
"timeAxe": "2019-07-30",
"fieldArrays": 43
},
{
"timeAxe": "2019-07-31",
"fieldArrays": 33
},
{
"timeAxe": "2019-08-01",
"fieldArrays": 32
},
{
"timeAxe": "2019-08-02",
"fieldArrays": 33
},
{
"timeAxe": "2019-08-03",
"fieldArrays": 33
},
{
"timeAxe": "2019-08-04",
"fieldArrays": 35
}
]
]
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
fieldArrays.forEach(function(fieldArray, index) {
var series = chart.series.push(new am4charts.LineSeries());
series.name = "Series " + (index + 1);
series.dataFields.valueY = "fieldArrays";
series.dataFields.dateX = "timeAxe";
series.data = fieldArray;
var bullet = series.bullets.push(new am4charts.CircleBullet());
});
// Legend
chart.legend = new am4charts.Legend(); 2) Si vous préférez conserver le tableau de tableaux, vous pouvez attribuer directement chaque tableau dans le propre tableau data de chaque série et conservez le même champ de valeur dans l'ensemble de votre série. Par exemple:
fieldArrays.forEach(function(fieldArray, index) {
var series = chart.series.push(new am4charts.LineSeries());
series.name = "Series " + (index + 1);
series.dataFields.valueY = "fieldArrays";
series.dataFields.dateX = "timeAxe";
series.data = fieldArray; //assign array[0] to its own line, array[1] to its own line, etc
var bullet = series.bullets.push(new am4charts.CircleBullet());
});
Démo de base ci-dessous:
var series = chart.series.push(new am4charts.LineSeries()); // ... series.dataFields.valueY = "fieldArrays"; series.dataFields.dateX = "timeAxe"; // ... var series2 = chart.series.push(new am4charts.LineSeries()); // ... series2.dataFields.valueY = "fieldArrays2"; series2.dataFields.dateX = "timeAxe"; // ... // repeat for each unique valuefield property
chart.data = [
{
timeAxe: "2019-1-27 0:44:47",
fieldsArrays: 1
},
{
timeAxe: "2019-1-27 0:45:18",
fieldArrays: 10,
fieldsArrays2: 200,
fieldsArrays3: 2100
},
{
timeAxe: "2019-1-27 0:47:19",
fieldsArrays2: 150,
fieldsArrays3: 2500
}
];
[
[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }, { timeAxe: "2019-1-27 0:45:18", fieldArrays: 10 }],
[{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 150 }],
[{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 2100 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }]
];
Merci beaucoup pour votre patience et pour avoir pris votre temps pour bien expliquer ce que je dois faire. J'essaierai bientôt votre solution (2ème approche) et vous ferai savoir comment elle se comporte. Je ne peux pas appliquer la première solution avec map car j'ai une très longue liste de tableaux dans fieldsArrays. Je n'aurais jamais pensé à series.data et c'est une suggestion géniale.
Je ne sais pas trop ce qui causerait cette erreur du haut de ma tête. Si vous rencontrez toujours ce problème, pouvez-vous publier un violon qui reproduit cela?
L'erreur a disparu après quelques travaux mineurs. C'était lié, je suppose, au comportement du curseur.
Bienvenue dans Stack Overflow! Veuillez participer à la visite (vous obtenez un badge!), Regardez autour de vous et lisez le centre d'aide , en particulier Comment poser une bonne question? Je recommande également la Ecrire la question parfaite de Jon Skeet . Qu'entendez-vous par "pour montrer chacun d'eux dans une variable différente" ?
C'est ce que vous avez dit ci-dessus, mais malheureusement, cela n'a pas beaucoup de sens. (En partie parce que vous ne "montrez" pas les choses "dans les variables." Voulez-vous dire "stocker" / "mettre"? Chacun dans sa propre variable individuelle?) Quel serait le résultat final? Le nombre d'entrées dans
fieldsArraysest-il toujours trois ou varie-t-il?Quelle est l'attente de production ?
voulez-vous aplatir le tableau? que voulez-vous dire par tous les postes? les index seront
0-array length-1Pouvez-vous ajouter le résultat attendu de l'exemple que vous avez fourni? i.e
[0, 1, 2, ...]@Alex donc vous avez besoin de [1, 200, 2500] comme sortie?
vous ne pouvez pas expliquer parce que vous ne comprenez pas ce que vous voulez vraiment, nous ne pouvons pas vous aider tant que vous ne collez pas la sortie réelle que vous voulez.