代码之家 › 专栏 › 技术社区 › Luca Antonelli

chartjs php数组进入“labels”和“datasets”

chart.js yii2 php

Luca Antonelli · 技术社区 · 6 年前

我用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

有可能吗?

2 回复 | 直到 6 年前

Webdeveloper_Jelle 6 年前

我以前是这样做的:

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
        ],
    ] 
]
]); ?>

Luca Antonelli 6 年前

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

<?= 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'];
    }
}