javascript - 传递给Chart.js的PHP字符串数据无法很好地呈现

我正在尝试第一次使用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返回格式化后的数据，但是数据集data变量将数据括在双引号中，如下所示：

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(',');

那应该将其作为数据数组传递。你可以这样休息