PHP呈现JSON数据集的堆叠面积图_Php_Chart.js

PHP呈现JSON数据集的堆叠面积图

php chart.js

PHP呈现JSON数据集的堆叠面积图,php,chart.js,Php,Chart.js,我想图表（PHP）的一些信息，我有一个BD甲骨文我有这个文件以JSON格式获取信息：更多数据.php 您应该尝试将类型设置为“line”，并在yAxes选项中设置“stacked”： scales: { yAxes: [{ stacked: true, }] }, 此外，在两个数据集对象之间缺少逗号“，”。这是一张堆叠的区域图如果您可以从服务器提供JSON响应，我们可以检查数据是否适合使用Chart.js <!DOCTYPE html> <html&g

我想图表（PHP）的一些信息，我有一个BD甲骨文

我有这个文件以JSON格式获取信息：

更多数据.php

您应该尝试将类型设置为“

line

”，并在yAxes选项中设置“stacked”：

scales: {
  yAxes: [{
    stacked: true,
  }]
},

此外，在两个数据集对象之间缺少逗号“，”。这是一张堆叠的区域图

如果您可以从服务器提供JSON响应，我们可以检查数据是否适合使用Chart.js

<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - BarGraph</title>
    <style type="text/css">
        #chart-container {
            width: 640px;
            height: auto;
        }
    </style>
 </head>
 <body>
    <div id="chart-container">
        <canvas id="mycanvas"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
 </body>

  $(document).ready(function(){
  $.ajax({
    url: "http://localhost/psm/admin/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);

        var timestamp = [];
        var cpu = [];
        var bcpu = [];
        var bd_scheduler = [];
        var uio = [];


        for(var i in data) {
            timestamp.push("TIMESTAMP " + data[i].TIMESTAMP);
            cpu.push(data[i].CPU);
            bcpu.push(data[i].BCPU);
            bd_scheduler.push(data[i].BD_SCHEDULER);
            uio.push(data[i].UIO);
        }

        var chartdata = {
            labels: timestamp,
            datasets : [
                {
                    label: 'Label ONE',
                    backgroundColor: 'rgba(200, 200, 170, 0.65)',
                    borderColor: 'rgba(180, 190, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(220, 200, 200, 1)',
                    hoverBorderColor: 'rgba(210, 200, 200, 1)',
                    data: cpu
                }
                             {
                    label: 'Label DOS',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: bcpu
                }
            ]
        };

        var ctx = $("#mycanvas");

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

scales: {
  yAxes: [{
    stacked: true,
  }]
},