无法从getJSON/PHP加载Chart.js数据? [英] Unable to load Chart.js data from getJSON / PHP?

问题描述

我正在尝试从 PHP 文件添加图表数据.当我手动添加值时绘制了图表- data:[28,20,2,7] ，但是，当我从 PHP 文件添加数据时，图表没有出现.

I am trying to add chart data from PHP file. Chart is drawn when I add the values manually - data: [28,20,2,7], But chart doesn't appear, when I add the data from PHP file.

我在哪里错了?如何从PHP输出中添加这些值?

Where am I going wrong here? How can I add these values from PHP output?

我的 PHP 代码:

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

Php文件输出(看起来不错):

Php file output (this looks OK):

[28,20,2,7]

这是我获取数据的方式:

Here is how i get the data:

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

警告结果(也可以):

localhost:63342 says 28,20,2,7

我的chartjs脚本:

My chartjs script:

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

推荐答案

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>

这篇关于无法从getJSON/PHP加载Chart.js数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！