在 PHP 中为 JSON Ajax 响应动态构建 ChartJs 数据集

Question

我在PHP中构建JSON时遇到问题，作为对Ajax call动态ChartsJs数据集的响应。

在PHP中，我返回了适用于 1 个 ChartJs 数据集的Ajax调用：

<?php
   $returnData['line'] = array(
     'type' => 'line',
     'title' => $title,
     'labels' => array('Jan','Feb','March','April','Mai'),
     'datasets' => array(
       array(
         'data' => array(10,20,15,45,21),
         'borderColor' => "#f7464a",
         'label' => "Label 1",
         'fill' => false
       )
     )
   );
   echo json_encode($returnData);
?>

构建图表的JavaScript ：

$.ajax({
    url: "div.php",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: data.datasets,
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#333'
                        }
                    }
                }
            };
            window.myPie = new Chart(ctx, config);

        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }


});

现在我的问题是，当我有 5 个或更多Datasets的数据时：

//Data  
$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');

//Datasets
$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(10,20,15,45,21);
$mydata4 = array(21,45,15,20,10);
$mydata5 = array(10,20,15,45,21);
$colors = array("#f7464a","#8e5ea2","#f7464a","#8e5ea2","#f7464a");

如何在JSON响应中动态构建这些Datasets ？ 例如：

'datasets' => array(

    for(i=0:i<5;i++)
    {
        array(
          'data' => array($mydata1[i]),
          'borderColor' => $colors[i],
          'label' => $linelabels[i],
          'fill' => false
        ),
    }

  )

Answer 1

解决了。 要为图表的 Ajax 响应动态创建 Json，也许可以帮助某人：

$returnData2['line'] = array(
  'type' => 'line',
  'title' => 'my Title',
  'labels' => array('Jan','Feb','March','April','Mai'),
  'datasets' => array(
    array(
      'data' => array(10,20,15,45,21),
      'borderColor' => "#f7464a",
      'label' => "Label 1",
      'fill' => false
    ),
    array(
        'data' => array(21,45,15,20,10),
        'borderColor' => "#8e5ea2",
        'label' => 'Line2',
        'fill' => false
    ),
    array
    (
        'data' => array(10,20,15,45,21),
        'borderColor' => "#f7464a",
        'label' => 'Line3',
        'fill' => false
    ),
    array
    (
        'data' => array(21,45,15,20,10),
        'borderColor' => "#8e5ea2",
        'label' => 'Line4',
        'fill' => false
    ),
    array(
        'data' => array(10,20,15,45,21),
        'borderColor' => "#f7464a",
        'label' => 'Line5',
        'fill' => false
    )
  )
);

echo json_encode($returnData2);

我使用了这个结构，我承认这不是最好的方法，但它确实有效。 :)

$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');

$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(35,24,20,18,11);
$mydata4 = array(18,5,34,17,42);
$mydata5 = array(23,17,34,12,45);
$colors = array("#E74C3C","#76448A","#148F77","#D4AC0D","#1ABC9C");


$returnData = new stdClass();
$returnData->line = new stdClass();
$returnData->line->type = 'line';
$returnData->line->title = 'my Title';
$returnData->line->labels = $labels;
$returnData->line->datasets = new stdClass();

$dataset = array();
for($i=0;$i<5;$i++)
{
    $mydata = array();
    if($i==0)
        $mydata = $mydata1;
    else if($i==1)
        $mydata = $mydata2;
    else if($i==2)
        $mydata = $mydata3;
    else if($i==3)
        $mydata = $mydata4;
    else if($i==4)
        $mydata = $mydata5;

    $datasets = new stdClass();
    $datasets->data = $mydata;
    $datasets->borderColor = $colors[$i];
    $datasets->label = $linelabels[$i];
    $datasets->fill = false;

    $dataset[] = $datasets;

}

$returnData->line->datasets = $dataset;

echo json_encode($returnData);

构建图表的 Ajax 响应：

$.ajax({
    url: "div.php",
    type: "POST",
    dataType: 'json',
    success: function(rtnData) {
        $.each(rtnData, function(dataType, data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var config = {
                type: data.type,
                data: {
                    datasets: data.datasets,
                    labels: data.labels
                },
                options:  {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#333'
                        }
                    }
                }
            };
            window.myPie = new Chart(ctx, config);

        });
    },
    error: function(rtnData) {
        alert('error' + rtnData);
    }


});

以及 Canvas 中的结果：

在此处输入图像描述