我正在查询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]}]

如何消除json_encode中的双引号(我一点也不知道:-p).一个小捐赠的准备实施的解决方案是可能的,因为这些部分花了我太多的时间从完成整个网站.

乔普

推荐答案

问题是,您正在将$row[]data属性构建为string,而不是array.请参阅下面的如何解决此问题:

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

然后,json应该被正确构造,图表应该可以工作.

Tipp:只需按照通常的PHP方式(as needed)构造所需的数据 struct ,然后将其传递给函数json_encode.它将完成繁重的任务,将其转换为有效的json.

Javascript相关问答推荐

如何最好地从TypScript中的enum获取值

Google图表时间轴—更改hAxis文本 colored颜色

类型自定义lazy Promise. all

Snowflake JavaScript存储过程返回成功,尽管预期失败

函数返回与输入对象具有相同键的对象

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

如何将多维数组插入到另一个多维数组中?

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

每次重新呈现时调用useState initialValue函数

在不扭曲纹理的情况下在顶点着色器中旋转UV

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

Jexl to LowerCase()和Replace()

输入数据覆盖JSON文件

AstroJS混合模式服务器终结点返回404

如何从Reaction-Redux中来自API调用的数据中筛选值

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0

检测带有委托的元素内部的点击,以及元素何时按其类名被选中

在给定的最小值、最大值和分辨率下计算相同分布的值

JAVASCRIPT|导入模块中断FOR循环