我正在查询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中的双引号。一个小的捐赠准备实施的解决方案是可能的,因为这些部分花了我太多的时间,从完成整个网站。
约普
1条答案
按热度按时间qcuzuvrc1#
问题是,您要将
$row[]
的属性data
构造为string
,则应将其创建为array
。请参见以下内容:那么json应该被正确构造,图表应该可以工作。
**提示:**只需以通常的PHP方式 (根据需要) 构造一个所需的数据结构,并将其传递给函数
json_encode
。它将完成繁重的工作,将其转换为有效的json
。