Как можно вывести данные из внешнего файла JSON на график chart.js? - PullRequest
Новая
       5

Как можно вывести данные из внешнего файла JSON на график chart.js?

0 голосов
/ 20 мая 2019

Я хотел бы отобразить данные из внешнего файла JSON, используя chart.js. Например, в файле json здесь перечислены фильмы ("title") и рейтинги ("rt_score"). Я хотел бы иметь возможность показывать каждый фильм и его рейтинг без включения статического JSON в файл .js, а с использованием метода вызова $ .ajax для ссылки на конечную точку / films.

Я хотел бы иметь:

метки: меткиПеременные data: dataVariable

Вот скрипка с настройкой до сих пор со статическими данными.

Вот мой HTML: 

<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>

Вот js, который успешно генерирует гистограмму, как я хочу, но со статическими данными в «метках» и «данных» вместо ссылки на файл JSON. 

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
            }
        }]
    }
}
});

Вместо использования статических данных и меток, как я могу ссылаться на внешний файл JSON, используя метод вызова $ .ajax?

Исходя из того, что я прочитал, мне, возможно, придется использовать «карту», ​​чтобы разбить объекты на массивы, содержащие метки и данные?

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 20 мая 2019

Я думаю, что вы ищете Ajax-запрос для заполнения вашего графика. 

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);

см. Живой пример здесь .

0 голосов
/ 21 мая 2019

Я понял это. Вот что сработало. Мне пришлось использовать .map для правильной настройки данных внутри переменных, а затем использовать эти переменные в качестве данных и меток. 

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 голосов
/ 20 мая 2019

Динамически загружайте данные JSON-диаграммы и устанавливайте их при создании графика. Есть много способов загрузить данные JSON диаграммы. Однако я считаю, что функция JQuery getJSON более актуальна для вас. 

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


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


}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...