Javascript Girl
  1. Javascript Girl
  3. Chargement d'un JSON externe dans ChartJs
Intereting Posts
Jasmine s'attend à une logique (attendez A OU B) Comment puis-je obtenir les valeurs de stockage local HTML5 dans le côté serveur Comment lier l'élément Bootstrap-datepicker avec le modèle angularjs ng? Différence entre la valeur, le prototype et la propriété Numéro de CORS sur localhost en appelant le service REST depuis angularjs Google Spreadsheets API avec OAuth2.0 en utilisant Javascript Comment obtenir des données du presse-papiers dans Firefox Enveloppez les images sur la pochette (image d'arrière-plan) Google PlusOne Button a des erreurs sur Chrome HtmlUnit ne charge pas le javascript externalisé Le Javascript vers la communication Flash ne fonctionne pas Comment annuler Backbone.sync afin d'ajouter l'apikey et le nom d'utilisateur à la fin? Appliquez le style à la portée du texte avec javascript dans uiwebview Quelles sont les solutions existantes pour la propriété `complete` dans FireFox? Comment ajouter des éléments à un tableau dynamiquement en javascript

Chargement d'un JSON externe dans ChartJs

Je suis débutant quand il s'agit d'utiliser des bibliothèques pour dessiner des graphiques en JavaScript / Je viens de commencer à expérimenter avec Chartjs et je n'ai pas pu utiliser comment utiliser getJson ou autre chose pour charger mon objet json et remplacer les étiquettes et les données. J'ai utilisé HighCharts avant et c'est assez simple par rapport à cela. De plus, comment j'irais impliquer cette directive dans Angular et l'afficher.

Https://jsfiddle.net/0u9Lpttx/1/

Index.html 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width: 100%; height: 100%;"> <canvas id="myChart" style="width: 100%; height: auto;"></canvas> </div> <div id="js-legend" class="chart-legend"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script> <script src="js/chartJsControl.js"></script> </body> </html>

Data.json 

 [ { "timestamp": "Monday", "original_tweet": "756", "retweets": "345", "shared": "34", "quoted": "14" }, { "timestamp": "Tuesday", "original_tweet": "756", "retweets": "345", "shared": "34", "quoted": "14" }, { "timestamp": "Wednesday", "original_tweet": "756", "retweets": "345", "shared": "34", "quoted": "14" } ]

ChartJsControl.js 

 var test = []; $.getJSON("data.json", function (json) { test.push(json[i].timestamp); }); var data = { labels: test, datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,0.8)", highlightFill: "rgba(151,187,205,0.75)", highlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; var ctx = document.getElementById("myChart").getContext("2d"); ctx.canvas.width = 1000; ctx.canvas.height = 800; var myChart = new Chart(ctx).Bar(data);

Si vous souhaitez utiliser le JSON retourné depuis data.json, vous devez le faire dans la fonction de rappel comme suit: 

 $.getJSON("data.json", function (json) { // will generate array with ['Monday', 'Tuesday', 'Wednesday'] var labels = json.map(function(item) { return item.timestamp; }); var data = { labels: labels, datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,0.8)", highlightFill: "rgba(151,187,205,0.75)", highlightStroke: "rgba(151,187,205,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; var ctx = document.getElementById("myChart").getContext("2d"); ctx.canvas.width = 1000; ctx.canvas.height = 800; var myChart = new Chart(ctx).Bar(data); });

Si vous l'utilisez avec Angular, je vous recommande d'utiliser la version angulaire de chart.js, voir: http://jtblin.github.io/angular-chart.js/

Ensuite, vous avez déjà une directive angulaire, que vous pouvez utiliser!