2
votes

Comment puis-je tracer des données d'un fichier JSON externe vers un graphique chart.js?

Je souhaite créer un graphique des données d'un fichier JSON externe à l'aide de chart.js. Par exemple, le fichier json here répertorie les films ("title") et les notes ("rt_score") . J'aimerais pouvoir montrer chaque film et sa note sans inclure le JSON statique dans le fichier .js, mais plutôt en utilisant la méthode d'appel $ .ajax pour faire référence au point de terminaison / films.

Je voudrais avoir:

labels: labelsVariable data: dataVariable

Voici un violon avec la configuration jusqu'à présent avec des données statiques.

Voici mon HTML:

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['Castle in the Sky', 'Grave of the Fireflies'],
    datasets: [{
        label: 'rating',
        data: [95, 97],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

Voici le js qui génère avec succès un graphique à barres comme je le souhaite, mais avec des données statiques dans "étiquettes" et "données" au lieu de référencer le fichier JSON.

<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"> 
</script>
</body>

Au lieu d'utiliser les données et les étiquettes statiques, comment puis-je référencer le fichier JSON externe en utilisant la méthode d'appel $ .ajax?

D'après ce que j'ai lu, je devrai peut-être utiliser "map" pour décomposer les objets en tableaux contenant des étiquettes et des données?

Merci d'avance.

javascript jquery json ajax

0 commentaires

3 Réponses :

0
votes

Chargez dynamiquement les données du graphique json et définissez-les lorsque vous créez le graphique. Il existe de nombreuses façons de charger les données json du graphique. Cependant, je pense que la fonction JQuery getJSON est plus pertinente pour vous.

$.getJSON( "chartdata/test.json", function( data ) {


 var myChart = new Chart(ctx, {
 type: 'bar',
 data: data,
 options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
  }
 });


}

2 commentaires

Merci d'avoir répondu. Comment puis-je obtenir du code que vous montrez ci-dessus pour pouvoir supprimer la chaîne après "labels:" et après "data:"? J'ai besoin de pouvoir placer tous les titres de films dans une variable et tous les rt_scores dans une variable, non?

Veuillez consulter la réponse modifiée. Le JSON que vous chargez dynamiquement doit contenir tout ce que vous aviez dans la version statique.

0
votes

Je pense que vous recherchez une requête Ajax pour remplir votre graphique.

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
      borderWidth: 1,
      borderColor:'#00c0ef',
      label: 'liveCount',
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Dynamically Update Chart Via Ajax Requests",
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var postId = 1;
var getData = function() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/' + postId + '/comments',
    success: function(data) {
      myChart.data.labels.push("Post " + postId++);
      myChart.data.datasets[0].data.push(getRandomIntInclusive(1, 25));

      // re-render the chart
      myChart.update();
    }
  });
};
setInterval(getData, 3000);

voir l'exemple en direct ici .

0 commentaires

0
votes

Je l'ai compris. Voici ce qui a fonctionné. J'ai dû utiliser .map pour configurer correctement les données à l'intérieur des variables, puis utiliser ces variables comme données et étiquettes.

function renderChart(data, labels) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'This week',
            data: data,
        }]
    },
});
}
function getChartData() {
$("#loadingMessage").html('<img src="./giphy.gif" alt="" srcset="">');
$.ajax({
    url: "https://ghibliapi.herokuapp.com/films",
    success: function (result) {
        var data = result.map(x=>x.rt_score);
        var labels = result.map(x=>x.title);
        renderChart(data, labels);
        console.log(data);
    },
});

$("#renderBtn").click(
function () {
    getChartData();
});

0 commentaires