2017-10-10 2 views
0

J'ai un graphique construit avec l'API de Charts.js. L'axe des x est configuré pour afficher des graduations à l'heure via moment.js. Je voudrais donner la possibilité de changer l'axe X tiques de l'heure à jour dans la semaine: je sais que pour ce faire, je viens de changer le code dans le graphique de ceci:Charts.js: changement de l'attribut xAxis time avec la fonction

xAxes: 
     [{ 
      type: 'time', 
      distribution: 'linear', 
      time: 
      { 
      unit: 'hour' 
      } 
     }], 

à ceci:

xAxes: 
     [{ 
      type: 'time', 
      distribution: 'linear', 
      time: 
      { 
      unit: 'week' 
      } 
     }], 

Mais je n'arrive pas à le faire avec une fonction JavaScript. Je voudrais être en mesure de modifier ce paramètre en fonction des préférences, donc je veux construire une fonction qui, lorsqu'elle sera appelée, changera l'attribut "unité" en quelque chose de différent. Quelqu'un peut-il aider? Voici ce que j'ai jusqu'à présent:

function setXAxis() 
    { 
    chart.config.options.scales.xAxes.time.unit.push('week'); 
    chart.update(); 
    }; 

Code complet de chart.js:

// Setting up progress chart via Charts.js 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    Chart.defaults.global.defaultFontColor = "#58a7dd"; 

    // Configuration 
    var chart = new Chart(ctx, 
    { 
    type: 'line', 
    data: 
    [{ 
     x: new Date(), 
     y: 1 
    }, 
    { 
     t: new Date(), 
     y: 10 
    }], 
    options: 
    { 
     scales: 
     { 
     xAxes: 
     [{ 
      type: 'time', 
      distribution: 'linear', 
      time: 
      { 
      unit: 'hour' //THIS IS WHAT I WANT TO CHANGE WITH THE FUNCTION 
      } 
     }], 
     yAxes: 
     [{ 
      type: 'category', 
      labels: ['one', 'two', 'three', 'four', 'five'] 
     }] 
     } 
    } 
    }); 

Répondre

0

Vous pouvez mettre à jour les options d'un tableau directement avec sa clé options, pas config.options aussi unit est pas un tableau pour pousser, c'est une touche pour lui attribuer une valeur dans votre code

function setXAxis() 
{ 
    chart.options.scales.xAxes[0].time.unit='week'; 
    chart.update(); 
}; 
+0

Merci, ça résout. Bizarre de ma part d'oublier les crochets pour le tableau xAxes aussi. – Brian