时间戳

首页 > 解决方案 > PHP渲染JSON数据集的堆积面积图

php - PHP渲染JSON数据集的堆积面积图

问题描述

我想绘制（PHP）我在 BD oracle 上的一些信息

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

更多数据.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）

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

如何使用来自 oracle 的 PHP 制作图表

但我无法修复它......

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

更多 bargraph.html

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

更多 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);
      }
    });
 });

标签： phpchart.js

解决方案

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

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

此外，您错过了 2 个数据集对象之间的逗号“，”。这是一个 StackedArea 图表的Codepen 工作示例。

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

推荐阅读