HighCharts et Javascript pour transmettre des données en tant que tableau

J'essaie de passer un tableau en tant que variable, avec Javascript, dans un graphique HighCharts. Les points avec leurs marqueurs sont affichés correctement, mais il n'y a PAS de spline reliant les points (Data 2, Purple). J'ai aussi essayé sur le même graphique, de passer directement un tableau avec les valeurs, et cette fois HighCharts affiche les marqueurs et les splines (Data 1, Red). Pour les deux séries, tous les paramètres de ligne (lineWidth, dashStyle, couleur) sont configurés. Je l'ai testé sur IE11 et Chrome et FireFox, et le résultat est le même ... Ci-dessous le code complet. Si quelqu'un a déjà rencontré ça ou, mieux encore, avoir une idée sur la façon de résoudre cela (j'ai les deux ensemble de données affichées avec des marqueurs ET une ligne joignant ces marqueurs), je serais très très intéressé! Merci beaucoup !!HighCharts et Javascript pour transmettre des données en tant que tableau

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Chart</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var myData = new Array(); 
     for (n=1;n<=10;n++) 
     { 
      myData[n]=Math.floor((Math.random() * 10) + 1); 
     } 
    var mySeries = []; 
    for (var i = 0; i < myData.length; i++){ 
     mySeries.push([i,myData[i]]); 
    } 
    $('#container').highcharts({ 
     title: { 
      text: 'Chart', 
      x: -20 //center 
     }, 
     xAxis: { 
      opposite:true, 
      title: {text: 'Horizontal Axis'}, 
      showFirstLabel: true, 
      showLastLabel: true, 
      min: 0, max: 12, 
      tickInterval: 1, 
      startOnTick: true, 
      endOnTick: true, 
     }, 
     yAxis: { 
      title: {text: 'Vertical Axis - inverted'}, 
      reversed: true, 
      showFirstLabel: true, 
      showLastLabel: true, 
      min: 0, max: 12, 
      tickInterval: 1, 
      startOnTick: true, 
      endOnTick: true, 
     }, 
     tooltip: { 
      valueSuffix: 'Week' 
     },  
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [ 
     {name:'Data 1',data:[0,1,2,3,4,5,6,7,8,9,10],marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF0000'}, 
     {name:'Data 2',data:mySeries    ,marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF00FF'}, 
     ] 
    }); 
}); 
</script> 
</head> 
<body> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="width: 1000px; height: 700px; margin: 0 auto"></div> 
</body> 
</html>

Source

2016-06-18 Julien

je crois que Highcharts échoue silencieusement pour dessiner la spline parce que votre première valeur de mySeries est undefined.

Avec myData vous commencez à n = 1, alors myData[0] est encore undefined après avoir exécuté à travers votre boucle for. Puis vous démarrez mySeries avec i = 0 de sorte que la première valeur indéfinie est ajoutée à mySeries. Si à la place vous démarrez i = 1 ou changez votre myDatafor en i = 0 alors cela devrait fonctionner.

Autrement dit, faites ceci:

var myData = new Array(); 
for (var n=0; n<10; n++){ 
    myData[n]=Math.floor((Math.random() * 10) + 1); 
} 
var mySeries = []; 
for (var i = 0; i < myData.length; i++){ 
    mySeries.push([i,myData[i]]); 
}

Cela dit, je réduis votre génération de données à une boucle for pour des raisons d'efficacité qui également supprimer le problème:

//define an empty array 
var mySeries = []; 

for (var i = 0; i < 10; i++){ 
    //create your value 
    var d = Math.floor((Math.random() * 10) + 1); 
    //push an array into your array 
    mySeries.push([i,d]); 
}

Source

2016-06-19 00:36:27 elliot

Impressionnant, Elliot , merci beaucoup ça marche! Tu m'as sauvé beaucoup de temps! Vraiment apprécié ! – Julien

Content de l'entendre. Pourriez-vous cliquer sur le bouton "Accepter la réponse" s'il vous plaît;) – elliot

HighCharts et Javascript pour transmettre des données en tant que tableau

Répondre

Questions connexes