Php 将2个获取的结果发送到AJAX

Php 将2个获取的结果发送到AJAX,php,ajax,chart.js,Php,Ajax,Chart.js,编辑 成功:功能(res) { var costData=[]; var costData2=[] costData.push(res['income']); costData2.push(res['instIncome']); var areaChartData = { labels: ["January", "February", "March", "April", "May", "June", "July", "Au

编辑 成功:功能(res) { var costData=[]; var costData2=[]

        costData.push(res['income']);
        costData2.push(res['instIncome']);



        var areaChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"
          , "September", "October", "November", "December"],
          datasets: [
            {
              label: "Cash Income",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: costData
            }
          ]
        };
        var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      }
结果:

没有显示任何数据

结束编辑

我有一段PHP代码,可以计算每个月的收入:

$res = array();
    $c = "cash";
    $i = "installment";
    //SUM of cash paid Month
    $sql = "SELECT 
    sum(cost) as cost

FROM 
(
    SELECT 
        sum(project_cost) as cost, 
        month(date_now) as month 
    FROM 
        dentist.patient_info 
    WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt 
    GROUP BY month(date_now)
    UNION
    SELECT 
        sum(payment), 
        month(date_now) 
    FROM 
       debt
    WHERE year(debt.date_now)=:year_now
    UNION SELECT 0,1
    UNION SELECT 0,2
    UNION SELECT 0,3
    UNION SELECT 0,4
    UNION SELECT 0,5
    UNION SELECT 0,6
    UNION SELECT 0,7
    UNION SELECT 0,8
    UNION SELECT 0,9
    UNION SELECT 0,10
    UNION SELECT 0,11
    UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":year_now", $date1);
$exec = $sqlStmt->execute();
$res = $sqlStmt->fetchAll();

echo json_encode($res);
结果被发送回AJAX success函数,并使用
ChartJS
显示在条形图中

现在我需要在同一张图表上为结果创建另一个条形图。 以下是脚本:

success:function(res)
    {
      var costData = [];
      $.each(res, function( key, row)
      {
        costData.push(row['cost']);
      });


        var areaChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"
          , "September", "October", "November", "December"],
          datasets: [
            {
              label: "Cash Income",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: costData
            }
          ]
        };
        var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00a65a";
        barChartData.datasets[0].strokeColor = "#00a65a";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      }
成功:功能(res)
{
var costData=[];
$.each(res,function(键,行)
{
costData.push(行['cost']);
});
var areaChartData={
标签:[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”
,“九月”、“十月”、“十一月”、“十二月”],
数据集:[
{
标签:“现金收入”,
strokeColor:“rgba(210、214、222、1)”,
pointColor:“rgba(210、214、222、1)”,
pointStrokeColor:#c1c7d1“,
pointHighlightFill:“fff”,
pointHighlightStroke:“rgba(2201)”,
数据:成本数据
}
]
};
var barChartCanvas=$(“#barChart”).get(0.getContext(“2d”);
var barChart=新图表(barChartCanvas);
var barChartData=areaChartData;
barChartData.datasets[0].fillColor=“#00a65a”;
barChartData.datasets[0].strokeColor=“#00a65a”;
barChartData.datasets[0].pointColor=“#00a65a”;
var barChartOptions={
//布尔值-刻度是从零开始,还是从最低值向下一个数量级开始
scaleBeginAtZero:对,
//布尔值-是否在图表中显示网格线
scaleShowGridLines:对,
//字符串-网格线的颜色
scaleGridLineColor:“rgba(0,0,0,05)”,
//Number—网格线的宽度
scaleGridLineWidth:1,
//布尔值-是否显示水平线(X轴除外)
缩放水平线:对,
//布尔值-是否显示垂直线(Y轴除外)
scaleShowVerticalLines:没错,
//布尔-如果每个条上都有一个笔划
barShowStroke:是的,
//数字-条笔划的像素宽度
杆行程宽度:2,
//数字-每个X值集之间的间距
barValueSpacing:5,
//数字-X值内数据集之间的间距
barDatasetSpacing:1,
//字符串-图例模板
legendTemplate:“
    ”, //布尔值-是否使图表响应 回答:是的, MaintaintAspectRatio:正确 }; barChartOptions.datasetFill=false; barChart.Bar(barChartData、barChartOptions); }
    我的问题是PHP代码。我应该如何添加另一个查询并将其提取到变量
    $res2
    中,并将其与
    $res
    组合,然后在
    success:function
    中将其拆分为
    即$res['income']和$res['outcome']

    如何在php代码中将两个获取的数组发送到一个
    json\u encode

    $res1 = $sqlStmt->fetchAll();
    $res2 = $sqlStmt2->fetchAll(); // Assuming u have executed 2nd query.
    $res['income'] = $res1; 
    $res['outcome'] = $res2;
    echo json_encode($res);
    
    您的Ajax成功

    success:function(res){
    
       $incomeData = res['income'];
       $outcomeData = res['outcome'];
    

    }

    为什么不能在编码之前将两个数组合并为一个?我是不是遗漏了什么?我该怎么做?这是我的主要问题这是您期望的解决方案吗?请参阅我问题顶部的编辑。它从“编辑”到“结束编辑”都被标记。不再显示任何数据。在成功函数的开头,记录
    res
    并查看返回数据是否如预期的那样。我在XHR上看到了它,数组被分割,但在图表上看不到
    success:function(res){
    
       $incomeData = res['income'];
       $outcomeData = res['outcome'];