更多data.php

<?php
 header('Content-Type: application/json');

 $conn = oci_connect('*****', '*****', 'HOSTNAME_FQDN:1521/ORACLE_SID');

 $graph=sprintf("select to_char(FECHA,'dd/mm/yyyy hh24:mi:ss') as Timestamp
    ,CPU
    ,BCPU
    ,BD_SCHEDULER
    ,UIO
    from sginfgbp.v_grafico_oem
    order by fecha desc");

 $parse=oci_parse($conn,$graph);
 oci_execute($parse);
 $data=array();
 while($row1 = oci_fetch_array($parse)){
 $data[]=$row1;

 }
 print json_encode($data);

?>

因此，当我致电http://SERVERNAME/data.php时我得到一个JSON数据集

TIMESTAMP “ 03/07/2018 11:39:00” CPU “ 0” BCPU “ 0” BD_SCHEDULER“ 0” UIO “ 0”

TIMESTAMP “ 03/07/2018 11:38:00” CPU “ 0” BCPU “ 2” BD_SCHEDULER “ 0” UIO “ 0” ... .. .. 。

以此类推。

我如何在堆积区域上绘制此信息？

X轴=时间戳

Y轴=（值1，颜色1），（值2，颜色2），（值3，颜色3），（值4，颜色4）

我正在尝试“克隆”线程上的信息：

How to make a graph using PHP from oracle

但是我无法解决.....

这是我的bargraph.html（我最终在浏览器中调用的URL）

更多app.js

  $(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);
      }
    });
 });

Answer 1

您应该尝试在yAxes选项中将类型设置为“ line”和“堆叠”设置：

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

此外，您在两个数据集对象之间缺少逗号“，”。这是stackedArea图表的Codepen working example。

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

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

更多data.php

更多bargraph.html

更多app.js

1 个答案: