Question

我正在将Yii2与ChartJS library一起使用，我会问是否可以将数组推入标签和数据范围。

现在这是我的代码：

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 800,
    ],
    'data' => [
        'labels' => [$m[0], $m[1], $m[2], $m[3], $m[4], $m[5], $m[6], $m[7], $m[8], $m[9], $m[10], $m[11]],
        'datasets' => [
            [
                'label' => "2018",
                'backgroundColor' => "rgba(255,99,132,0.2)",
                'borderColor' => "rgba(255,99,132,1)",
                'pointBackgroundColor' => "rgba(255,99,132,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(255,99,132,1)",
                'data' => [$t[0], $t[1], $t[2], $t[3], $t[4], $t[5], $t[6], $t[7], $t[8], $t[9], $t[10], $t[11]]
            ],
        ] 
    ]
]); ?>

如您所见，我正在设置值以指定每个元素的数组中的位置。

我尝试做类似的事情：

$tot = "\"" . implode($t, ", \"") . "\"";

上面的代码得出以下结果：

"0", "12", "5", "7", ...

但是如果我尝试做类似的事情，那是行不通的：

'data' => [$tot] or 'data' => $tot

有可能吗？

Answer 1

我以前是这样做的：

var ctx = document.getElementById("Chart1"); // the element where the chart should be rendered
var myChart1 = new Chart(ctx, {
     type: 'line',
     data: {
        labels: [<?php 
            foreach( $m as $key => $row) {
                   echo "'".$row['label']."', "; // you can also use $row if you don't use keys                  
            }
         } ?>],

         datasets: [{
            label: '2018',
            data: [<?php
            foreach( $t as $key => $row) {
               echo "'".$row['data']."', "; // you can also use $row if you don't use keys         
             } ?>],
            backgroundColor => "rgba(255,99,132,0.2)",
            borderColor => "rgba(255,99,132,1)",
            pointBackgroundColor => "rgba(255,99,132,1)",
            pointBorderColor => "#fff",
            pointHoverBackgroundColor => "#fff",
            pointHoverBorderColor => "rgba(255,99,132,1)",
          }]
       },
     options => [
        'height' => 400,
        'width' => 800,
     ]
});

我使用javascript创建图表，并从我的php数组中添加数据。

您可以通过添加具有上述ID的元素来显示图表。

PHP用于处理数据，而JS用于显示数据。
因此，使用JS显示图表，使用PHP处理数据。

您可以这样做：

<?php
$data = array(foreach( $t as $key => $row) {
     echo "'".$row['data']."', "; // you can also use $row if you don't use keys         
});
$labels = array(foreach( $m as $key => $row) {
     echo "'".$row['label']."', "; // you can also use $row if you don't use keys         
});
?>

<?= ChartJs::widget([
'type' => 'line',
'options' => [
    'height' => 400,
    'width' => 800,
],
'data' => [
    'labels' => $labels,
    'datasets' => [
        [
            'label' => "2018",
            'backgroundColor' => "rgba(255,99,132,0.2)",
            'borderColor' => "rgba(255,99,132,1)",
            'pointBackgroundColor' => "rgba(255,99,132,1)",
            'pointBorderColor' => "#fff",
            'pointHoverBackgroundColor' => "#fff",
            'pointHoverBorderColor' => "rgba(255,99,132,1)",
            'data' => $data
        ],
    ] 
]
]); ?>

Answer 2

我的错误是在代码的另一部分中，与数组有关。我将发布正确的解决方案：

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 800,
    ],
    'data' => [
        'labels' => $labels,
        'datasets' => [
            [
                'label' => "2018",
                'backgroundColor' => "rgba(255,99,132,0.2)",
                'borderColor' => "rgba(255,99,132,1)",
                'pointBackgroundColor' => "rgba(255,99,132,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(255,99,132,1)",
                'data' => $data,
            ],
        ] 
    ]
]); ?>

这是获取当前周数据的PHP：

$labels = array();
$data = array();

$curweek = date('Y-m-d', strtotime("previous monday"));
$today = date('Y-m-d');

$dates = new DatePeriod(
    DateTime::createFromFormat('Y-m-d|', $curweek),
    new DateInterval('P1D'),
    DateTime::createFromFormat('Y-m-d|', $today)->add(new DateInterval('P1D'))
);

foreach ($dates as $date) {
    $datestr = $date->format('Y-m-d');
    $index = array_search($datestr, array_column($chartvalue, 'dataNl'));
    if ($index === false) {
        $labels[] = date("d", strtotime($datestr));
        $data[] = 0;
    } else {
        $labels[] = date("d", strtotime($datestr));
        $data[] = $chartvalue[$index]['totale'];
    }
}

ChartJs php数组分为“标签”和“数据集”

2 个答案: