Разные цвета для Google ColumnChart

1

Я пытаюсь нарисовать график с данными, поступающими из php-кода в виде массива, переданного в функцию draw. Цвета показывают, если я использую PieChart, но NOT ColumnChart. Как я могу заставить бары показывать разные цвета?

Вот мой сценарий:

<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable(<?php 

    $baseText = '';
    $trimmedPercentbf = '';
$js_arraybf = "['Percentage','$baseText'],";

    $counter = 0;

    $getBasicFunctionality = [SQL Query Here];
        while ($basicFunctionality = dbfetch($getBasicFunctionality)):

            $baseTextbf = $basicFunctionality["sat_lower_level_text"];


    $weightsTotal = $basicFunctionality["total"];

            $average = $basicFunctionality["weightAVG"];
            $countTotal = $basicFunctionality["total_users"];

            $counter += $countTotal;

            $percentage = ($average)/5 * 100;
            $trimmedPercentbf = number_format($percentage, $decimals=2);




                    if($counter != $countTotal):
                        $sep = ",";
                    else:
                        $sep = ",";
                    endif;


                        $js_arraybf .= "[ '$baseTextbf', $trimmedPercentbf ]".$sep;


                endwhile;


                                    $js_array = rtrim($js_arraybf, ', ');

                print "[".$js_array."]";






    ?>);

    var chart = new google.visualization.ColumnChart(document.getElementById('community'));
    chart.draw(data, {width: 800, height: 800, is3D: true,/*vAxis: {format:'#%'},pieHole: 0.4,*/colors: ['#242424','#437346','#97D95C','#7D252B','#EB9781','#FFD2B5','#4A4147','#3796c8', 'red','yellow','green', 'blue'],axisFontSize:12, title: '2.Leadership Management & Communication'});
  }
</script>

//Примеры данных, которые поступают из PHP-кода в виде массива, следующие: var data = google.visualization.arrayToDataTable([['Percentage', ''], ['label1', 51.43], ['label2', 60,00], ['label3', 66.67], ['label4', 60.00], ['label5', 66.67], ['label7', 100.00], ['label8', 100.00], ['label9', 100.00 ], ['label10', 100.00], ['label11', 100.00], ['label12', 80.00], ['label13', 40.00]]);

//Текущий график, который имеет только один цвет, выглядит следующим образом: Изображение 174551

//Мне нужен граф, чтобы он выглядел как тот, который я использовал jqbargraph, но не могу использовать jq, поскольку он вызывает проблемы с макетами с моими длинными метками: Изображение 174551

  • 0
    Как выглядят полученные круговые диаграммы и гистограммы? Можете ли вы поделиться некоторыми фиктивными входными данными?
  • 0
    var data = google.visualization.arrayToDataTable ([['Percentage', ''], ['label1', 51.43], ['label2', 60.00], ['label3', 66.67], ['label4', 60.00] , ['label5', 66.67], ['label7', 100.00], ['label8', 100.00], ['label9', 100.00], ['label10', 100.00], ['label11', 100.00], [ «label12», 80.00], [«label13», 40.00]]);
Показать ещё 3 комментария
Теги:
google-visualization

1 ответ

1
Лучший ответ

Цвета, которые вы определили с помощью colors -option, относятся к столбцам.

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

var data = new google.visualization.arrayToDataTable([
    ['Percentage', '',{ role: 'style' }],
    ['label1',  51.43, '#242424'],
    ['label2',  60.00, '#437346'],
    ['label3',  66.67, '#97D95C'],
    ['label4',  60.00, '#7D252B'],
    ['label5',  66.67, '#EB9781'],
    ['label7',  100.00,'#FFD2B5'],
    ['label8',  100.00,'#4A4147'],
    ['label9',  100.00,'#3796c8'],
    ['label10', 100.00,'red'],
    ['label11', 100.00,'yellow'],
    ['label12', 80.00, 'green'],
    ['label13', 40.00, 'blue']
]);

https://jsfiddle.net/qdaw7ssx/

Поделиться
  • 0
    Спасибо за ваш ответ ... но моя проблема на самом деле связана с тем, что я выбираю значения меток из таблицы базы данных динамически. Они передаются в массив и затем отражаются, как указано выше (print "[". $ Js_array. "]";). Метки не являются статичными. Надеюсь, ты меня понимаешь?
  • 0
    Если вам нужны разные цвета для строк, вы должны предоставить данные по мере необходимости, поэтому вам нужно будет изменить вывод вашего PHP-скрипта
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню