Question

我正在尝试使用json_encode从数据库中加载带有活动数据的图表，它适用于标签和数据值，但不适用于背景色。

我能做

var myColors = < ?php echo json_encode($myColors); ?>;

然后在图表中

backgroundColor: [myColors[0], myColors[1]]

很好，但是我不能做

backgroundColor: myColors

也在做

var myColors = ["red", "blue", "green"];

然后

backgroundColor: myColors

可以正常工作，但我无法用PHP数组来做到这一点。

//var myColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
var myColors = <?php echo json_encode($myColors); ?>;

//All chart data
var data = {
    labels: <?php echo json_encode($activityNames); ?>, //Get activity names from PHP array
    datasets: [{
        label: 'Daily Activities',
        data: <?php echo json_encode($activityTimes); ?>, //Get times from PHP array
        backgroundColor: [myColors[0], myColors[1], myColors[2], myColors[3], myColors[4], myColors[5], myColors[6]],
        borderColor: '#333',
        borderWidth: 4
    }]
};

代码现在可以正常工作，但是如果我想在数据库中添加额外的数据，那么我还必须更新此代码以包含myColors [7]，或者如果删除则删除myColors [6]一条数据。还具有backgroundColor：myColors将使图表变为灰色，并且工具提示将不起作用

Answer 1

我无法想到的唯一原因是您的PHP $myColors变量是对象还是非连续数组（即，您已跳过键）。

前者不太可能，因此假设后者，例如

$myColors = [0 => 'red', 1 => 'blue', 3 => 'green'];

您将获得一个JS对象，例如

{"0":"red","1":"blue","3":"green"}

解决方案是使用顺序键创建一个数组。如果要建立一个，不要直接分配索引值，请使用

$myColors[] = 'blue'

代替推送新值。

如果无法避免，请使用array_values()创建一个索引数组

var myColors = <?= json_encode(array_values($myColors)) ?>;

Chart.js从PHP加载数据颜色

1 个答案: