Блог

Главная - Вопросы по программированию - Не удается загрузить Chart.js данные из getJSON / PHP?

Не удается загрузить Chart.js данные из getJSON / PHP?

#php #jquery #chart.js

#php #jquery #chart.js

Вопрос:

Я пытаюсь добавить данные диаграммы из PHP файла. Диаграмма отображается, когда я добавляю значения вручную data: [28,20,2,7] , но диаграмма не отображается, когда я добавляю данные из PHP файла.

Где я ошибаюсь? Как я могу добавить эти значения из выходных данных PHP?

Мой PHP код:

 echo json_encode(array($rectotals,$recX,$recXS,$recXM));

Вывод файла Php (выглядит нормально):

 [28,20,2,7]

Вот как я получаю данные:

 $.getJSON("chartdata.php").then(function(chart_data1){
        alert(chart_data1);
    })

Результат предупреждения (это тоже нормально):

 localhost:63342 says 28,20,2,7

Мой скрипт chartjs:

 <canvas id="myChart" width="400" height="340"></canvas>
<script>

    $.getJSON("chartdata.php").then(function(chart_data){
        alert(chart_data);
    })

    //setTimeout(function() { alert(db_data1); }, 2000);

    var ctx = document.getElementById('myChart');

    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Total', 'Size X', 'Size XS', 'Size SM],
            datasets: [{

                data: chart_data,
                backgroundColor: [
                    'rgba(54, 162, 235, 1)',
                    'rgb(255,99,132)',
                    'rgba(255, 159, 64, 1)',
                    'rgb(255,206,86)'
                ],
                borderColor: [
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 99, 132, 1)',
                    'rgb(255,159,64)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 0.5,
            }]
        },
        options: {
            responsive: true,
            animation: {
                duration: 2800,
                easing: 'easeInOutQuad',
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 15,
                    bottom: 0
                }
            },
            cutoutPercentage : 75,
            legend: {
                display: false,
                position: 'bottom',
                fullWidth: true,
            }
        }
    });
</script>

Ответ №1:

 var ctx = document.getElementById("myChart").getContext("2d");
let myChart = null;

function getConfig(chart_data){
  return ({
    type: "pie",
    data: {
      labels: ["Total", "Size X", "Size XS", "Size SM"],
      datasets: [
        {
          data: chart_data,
          backgroundColor: [
            "rgb(54,162,235)",
            "rgb(255,99,132)",
            "rgba(255, 159, 64, 1)",
            "rgb(255,192,33)"
          ],
          borderColor: [
            "rgb(255,255,255)",
            "rgb(255,255,255)",
            "rgb(255,255,255)",
            "rgb(255,255,255)"
          ],
          hoverBackgroundColor: ['#373739', '#373739', '#373739', '#373739'],
        }
      ]
    },
    options: {
      responsive: true,
      animation: {
        duration: 0, //2800, I remove animation time
        easing: "easeInOutQuad"
      },
      tooltips: {
        mode: 'nearest'
      },
      layout: {
        padding: {
          left: 0,
          right: 0,
          top: 15,
          bottom: 0
        }
      },
      cutoutPercentage: 66,
      legend: {
        display: false,
        position: "bottom",
        fullWidth: true
      }
    }
  });
}

function getJSON(){
    // emulate fetch
  return new Promise(resolve => {
    const chart_data = [
      Math.random() * 50,
      Math.random() * 50,
      Math.random() * 50,
      Math.random() * 50
    ];
    resolve(chart_data)
  })
}

function update(){
  getJSON().then(data => {
      myChart.data.datasets[0].data = data;
      myChart.update();
  });
}

function initializeChart() {
    getJSON().then(data => { 
        myChart = new Chart(ctx, getConfig(data));
    });
}

initializeChart();
document.getElementById('update_chart').addEventListener('click', update, false); 
 <html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  </head>
  <body>
    <div>
      <button id="update_chart">Update Records</button>
    </div>
    <canvas id="myChart" width="50" height="40"></canvas>
  </body>
</html>

Комментарии:

1. Привет, Даниил, я тестирую ваш пример. Диаграмма перерисовывается с новыми значениями при каждом обновлении записи, но, похоже, сама диаграмма не обновляется. При наведении на диаграмму отображается ее метка значения, заметил, что каждый раз, когда диаграмма перерисовывается, при наведении значение переключается между старым значением и новым значением, сама диаграмма колеблется, показывая старое значение и новое значение. это останавливается только тогда, когда я перезагружаю / обновляю страницу, вероятно, нужно использовать .update(); для диаграммы. Я не могу понять, где и как его использовать. Пожалуйста, помогите

2. Раньше я setInterval менял данные каждый 1000 milliseconds раз, когда вы можете их удалить, и оставлял только getJSON().then(data => drawChart(data)); или даже drawChart(data)

3. Спасибо, Даниил, я могу обновлять данные и перерисовывать диаграмму с помощью вашего кода, но когда я навожу курсор на диаграмму, посмотрите, что происходит, как я могу это решить: jsfiddle.net/hakxonk/eo0qrkja/32

4. Привет @HassanKhaleel. Да, теперь я понимаю. Мне жаль, что это моя ошибка. Я исправил свой ответ. Спасибо вам!

Ответ №2:

Query.getJSON() выполняет асинхронный HTTP запрос. После получения результата диаграмма уже создана, и полученные данные не влияют на диаграмму.

Чтобы решить эту проблему, поместите создание диаграммы в then обратный вызов следующим образом.

 $.getJSON("chartdata.php").then(function(chart_data) {
  var ctx = document.getElementById('myChart');
  var myChart = new Chart(ctx, {
    type: 'pie',
    ...
});