我是第一次尝试使用 Chart.js。我已经了解它是如何工作的,但我现在想将我的数据从 php 传递到 javascript。
这就是我所拥有的:
PHP
//send the string values to javascript
$grade_range_string = mb_substr($grade_range_string, 0, -2);
$percentage_count_string = implode(", ", $percentage_count_array);
//chart colors
$grade_chart_colors_string = "";
$grade_chart_colors_array = grade_chart_colors();
foreach ($grade_chart_colors_array as $color) {
$grade_chart_colors_string .= "'".$color."'" . ", ";
}
$grade_chart_colors_string = mb_substr($grade_chart_colors_string, 0, -2);
HTML
<span id="grade_range_string" data-value="<?php echo $grade_range_string; ?>"></span>
<span id="percentage_count_string" data-value="<?php echo $percentage_count_string; ?>"></span>
<span id="grade_chart_colors_string" data-value="<?php echo $grade_chart_colors_string; ?>"></span>
<canvas id="broadsheet_piechart"></canvas>
Javascript:
// Pie chart
if ( $('#broadsheet_piechart').length ) {
var grade_range_string = $('#grade_range_string').attr('data-value');
var percentage_count_string = $('#percentage_count_string').attr('data-value');
var grade_chart_colors_string = $('#grade_chart_colors_string').attr('data-value');
//debug
console.log(grade_range_string);
console.log(percentage_count_string);
console.log(grade_chart_colors_string);
var ctx = document.getElementById("broadsheet_piechart");
var data = {
datasets: [{
data: [percentage_count_string],
backgroundColor: [grade_chart_colors_string],
label: 'My dataset' // for legend
}],
labels: [grade_range_string]
};
var broadsheet_piechart = new Chart(ctx, {
data: data,
type: 'pie',
options: {
animation: {
duration: 0
}
}
});
}
//debug
console.log(data);
在控制台窗口中,3 个变量 grade_range_string
、percentage_count_string
、grade_chart_colors_string
返回格式化的数据,但 datasets 数据变量包含双引号中的数据如下:
data: ["'Item 1', 'Item 2', 'Item 3', 'Item etc'"]
对于backgroundColor
和labels
也是如此。
这毁了我的馅饼......
为什么会发生这种情况,如何去掉引号?有更好的方法来实现这一目标吗?谢谢。
最佳答案
在 php 中你可以做到这一点
//send the string values to javascript
$grade_range_string = mb_substr($grade_range_string, 0, -2);
$percentage_count_string = implode(", ", $percentage_count_array);
//chart colors
$grade_chart_colors_string = "";
$grade_chart_colors_array = grade_chart_colors();
// New Code
$grade_chart_colors_string = join(",", $grade_chard_colors_array); // will join all the colors with ','
//for eg. $grade_chart_colors_string = "red,blue,yellow"
$grade_chart_colors_string = mb_substr($grade_chart_colors_string, 0, -2);
在 javascript 中将字符串返回到数组
var grade_chart_colors_string = $('#grade_chart_colors_string').attr('data-value');
var grade_chart_colors_array = grade_chart_colors_string.split(',');
这应该将其作为数据中的数组传递。你可以像这样完成剩下的事情
关于javascript - 传递给 Chart.js 的 PHP 字符串数据渲染不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53790146/