文章/答案/技术大牛

发布

社区首页 >问答首页 >无法从Chart.js / getJSON加载getJSON数据？

问无法从Chart.js / getJSON加载getJSON数据？
EN

Stack Overflow用户

提问于 2020-12-23 07:46:17

回答 2查看 258关注 0票数 0

我正在尝试从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

我的图表剧本：

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

php

jquery

chart.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-23 09:26:19

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>

票数 0

Stack Overflow用户

发布于 2020-12-23 08:03:49

Query.getJSON()发出异步HTTP请求。一旦结果到达，图表已经创建，所获得的数据对图表没有任何影响。

为了解决这个问题，将图表创建放在then回调中，如下所示。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65420671

复制

相似问题

问无法从Chart.js / getJSON加载getJSON数据？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法从Chart.js / getJSON加载getJSON数据？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法从Chart.js / getJSON加载getJSON数据？
EN