首页 > 解决方案 > 无法显示来自数据库数据的图表

问题描述

这是我的 Graph.js 文件中的错误:

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

在这个文件中,我想用我的数据库中的数据显示一个图表。我已经可以连接数据库并且也可以获取数据。请帮忙,我不知道这是怎么回事。谢谢你。

$(document).ready(function() {
  $.ajax({
    url: 'http://localhost/GraphPHP/Data.php', //read from db
    method: 'GET',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) { //check json data
      console.log(data);
      var value1 = [];
      var value2 = [];
      var month_pm = [];
      for (var i in data) {
        month_pm.push(data[i].month_pm);
        value1.push(data[i].Motor_brush);
        value2.push(data[i].Gun_baseline);
      }

      var chartdata = {
        labels: month_pm,
        datasets: [{
            label: 'Motor_brush',
            fill: false,
            backgroundColor: 'rgba(255, 55, 50, 50)',
            borderColor: 'rgba(255, 55, 50, 50)',
            hoverBackgroundColor: 'rgba(255, 55, 50, 5)',
            hoverBorderColor: 'rgba(255, 55, 50, 0)',
            data: value1,
          },{
            label: 'Gun_baseline',
            fill: false,
            backgroundColor: 'rgba(255, 230, 80, 50)',
            borderColor: 'rgba(255, 230, 80, 50)',
            hoverBackgroundColor: 'rgba(255, 230, 80, 5)',
            hoverBorderColor: 'rgba(255, 230, 80, 0)',
            data: value2,
          }
        ]
      };

      var ctx = $('#mycanvas');
      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

标签: javascriptphpjqueryajaxdatabase

解决方案


推荐阅读