javascript - 谷歌图表 : Cannot read property 'color' of null

Question

我在使用 Google 图表时遇到此间歇性错误，可能每五次加载包含图表的页面一次。我怀疑问题是我使用的颜色数组是使用 jQuery Ajax 从服务器中提取的。颜色作为序列化数组保存在数据库中。

JS..

var $colours = [];

$(document).ready(function(){
"use strict";
    $.ajax({
        url: 'ajax/charts_ajax.php',
        dataType: 'json',
        type: 'POST',
        data: 'userID='+$userID+'&action=getColours',
        success: function(response){
            $.each(response, function(i) {
                $colours[i] = response[i];
            });
        },
    });
});

PHP

if($_POST['action'] == 'getColours'){
    $userID = $_POST['userID'];
    $sql = "SELECT * FROM user WHERE userID = '$userID'"; 
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli)); 
    $row = mysqli_fetch_array($result);
    //get colour scheme being used from database
    $scheme = $row['colScheme'];
    $sql = "SELECT * FROM scheme WHERE schemeID = '$scheme'";
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
    $row = mysqli_fetch_array($result);
    $colours = $row['coloursArray'];
    $colour_scheme = unserialize($colours);
    echo json_encode($colour_scheme);
}

回到JS

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(targets);
function targets() {
    "use strict";
        var data = google.visualization.arrayToDataTable([ 
          ['Grade', 'Target', 'Interim Target', 'Actual'], 
          ['Grade 1',  70, 50, getPercent($grade1)], 
          ['Grade 2',  20, 40, getPercent($grade2)], 
          ['Grade 3',  10, 10, getPercent($grade3)] 
        ]); 
        var options = { 
          height: 360, 
          width:500, 
          title: 'Grade Targets', 
          colors: $colours, 
          hAxis: {title: 'Grades', titleTextStyle: {color: '#ffffff'}}, 
          vAxis: {title: 'Percentage', titleTextStyle: {color: 'black'}, format: '0'}, 
          fontName:"'Arial'", 
          backgroundColor: { fill: "none" } 
    }; 
    var chart = new google.visualization.ColumnChart(document.getElementById('targets')); 
    chart.draw(data, options); 
}

我已经检查了来自 AJAX 调用的 JSON 响应，我觉得它没问题

["#32CCFE","#F68634","#713973","#B3C234","#E2DFCB","#C5F4FF","#C00","#FF5733","#FEB4FC"]

一点背景，它从数据库中提取颜色的原因是我开发了一个网站，用户可以在其中为图表创建自己的配色方案，并且在某些图表中，元素数量未知数据数组。

如果对颜色使用数组不是最佳解决方案，是否有更好的方法？

Answer 1

对于可能遇到此问题的任何其他人来说，图表似乎是在 ajax 调用从数据库中提取 $colours 数组值之前绘制的。

我通过在页面头部使用它存储值来解决这个问题

<script>
  var $colours = <?php echo json_encode($colour_scheme); ?>;
</script>

这样，在绘制图表之前，值已以数组方式保存。