Диаграммы Google: невозможно прочитать свойство 'color' из 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); 
}

Я проверил ответ JSON от AJAX-вызова, и он выглядит хорошо для меня

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

Немного фона, причина, по которой он извлекает цвета из базы данных, заключается в том, что я разработал сайт, где пользователи могут создавать свои собственные цветовые схемы для диаграмм, а в некоторых диаграммах есть неизвестное количество элементов в массив данных.

Если использование массива для цветов не лучшее решение, есть ли лучший способ?

Answer 1

Для всех, кто может столкнуться с этой проблемой, кажется, что диаграммы рисовались до того, как вызов ajax извлек значения массива $ colors из базы данных.

Я решил эту проблему, сохранив значения, используя это в заголовке страницы

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

Таким образом, значения были сохранены в массиве до рисования диаграмм.