chart.js PHP到JS字符串转换问题

hgncfbus  于 2022-12-04  发布在  Chart.js
关注(0)|答案(1)|浏览(192)

我正在查询WordPress的ACF字段数据,需要绘制成chart.js雷达类型的图表。

<?php
// Query posts
$args = array(
    'post_type' => 'resultaten',
    'tax_query' => array(
    'relation' => 'AND',
        array(
            'taxonomy' => 'cursus',
            'field' => 'slug',
            'terms' => 'vitaliteitsscan'
        ),
        array(
            'taxonomy' => 'client',
            'field' => 'name',
            'terms' => 'Bedrijf b',
        ),
    ),
  'posts_per_page' => -1,
  'orderby' => 'date',
  'order' => 'DESC',
);
$query = new WP_Query( $args );
$total = $query->found_posts;
//echo $total;

// Set empty array for dataset
$row = array();

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
      
// Here we have the ACF fields per post (it's a form) results of calculation is a number   
$autonomie = 
((get_field( 'vitaliteit_stelling_1') +
get_field( 'vitaliteit_stelling_2') + 
get_field( 'vitaliteit_stelling_3') +
get_field( 'vitaliteit_stelling_4'))/4);

$competentie =      
((get_field( 'vitaliteit_stelling_5') +
get_field( 'vitaliteit_stelling_6') + 
get_field( 'vitaliteit_stelling_7') +
get_field( 'vitaliteit_stelling_8'))/4);      

$verbondenheid =      
((get_field( 'vitaliteit_stelling_9') +
get_field( 'vitaliteit_stelling_10') + 
get_field( 'vitaliteit_stelling_11') +
get_field( 'vitaliteit_stelling_12'))/4);  

$vrijheid =      
((get_field( 'vitaliteit_stelling_13') +
get_field( 'vitaliteit_stelling_14') + 
get_field( 'vitaliteit_stelling_15') +
get_field( 'vitaliteit_stelling_16'))/4); 

$welbevinden =      
((get_field( 'vitaliteit_stelling_17') +
get_field( 'vitaliteit_stelling_18') + 
get_field( 'vitaliteit_stelling_19') +
get_field( 'vitaliteit_stelling_20'))/4);

$energie =      
((get_field( 'vitaliteit_stelling_21') +
get_field( 'vitaliteit_stelling_22') + 
get_field( 'vitaliteit_stelling_23') +
get_field( 'vitaliteit_stelling_24'))/4); 

// Construct the dataset array
$row[] = 
      array(
      'label' => "Uitslag",
      'backgroundColor' => "rgba(146,196,213,0.2)",
      'data' => "$autonomie, $competentie, $verbondenheid, $vrijheid, $welbevinden, $energie",
      );
    }
}

wp_reset_postdata();

//echo print_r($row);
$work = json_encode($row); 
//echo $work;
?>

<script>  
var marksCanvas = document.getElementById("myChart");

var marksData = {
  labels: ["Autonomie", "Competentie", "Sociale verbondenheid", "Fysieke vrijheid", "Emotioneel welbevinden", "Energie"],
 // Now here i want the above array to output the retrieved data in the below format
 datasets: [{
    label: "Uitslag",
    backgroundColor: "rgba(146,196,213,0.2)",
    data: 
     [49.75, 51, 23.5, 48.25, 27.5, 61.75],
  },
  {
    label: "Uitslag",
    backgroundColor: "rgba(146,196,213,0.2)",
    data: 
     [69.75, 21, 73.5, 68.25, 37.5, 11.75],
  }], 
};
// This plots the chart on the canvas
var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData,
   options: {
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 100
            }
        }
    }
});

</script>

上面的代码得到的数组输出是:
[{"label":"uitslag","backgroundColor":"rgba(146,196,213,0.2)","data":"49.75, 51, 23.5, 48.25, 27.5, 61.75"},{"label":"uitslag","backgroundColor":"rgba(146,196,213,0.2)","data":"50.25, 43.5, 39.25, 55.5, 25.5, 33.5"}]
这需要成为
[{label:"uitslag",backgroundColor:"rgba(146,196,213,0.2)",data:[49.75, 51, 23.5, 48.25, 27.5, 61.75]},{label:"uitslag",backgroundColor:"rgba(146,196,213,0.2)",data:[50.25, 43.5, 39.25, 55.5, 25.5, 33.5]}]
拔我的头发了(我没有:-p)如何摆脱json_encode中的双引号。一个小的捐赠准备实施的解决方案是可能的,因为这些部分花了我太多的时间,从完成整个网站。
约普

qcuzuvrc

qcuzuvrc1#

问题是,您要将$row[]的属性data构造为string,则应将其创建为array。请参见以下内容:

...
$row[] = 
    array(
        'label' => "Uitslag",
        'backgroundColor' => "rgba(146,196,213,0.2)",
        'data' => array($autonomie, $competentie, $verbondenheid, $vrijheid, $welbevinden, $energie)
    );
 ...

那么json应该被正确构造,图表应该可以工作。

**提示:**只需以通常的PHP方式 (根据需要) 构造一个所需的数据结构,并将其传递给函数json_encode。它将完成繁重的工作,将其转换为有效的json

相关问题