Google Charts - Изменить цвет отдельной панели

С помощью гистограммы Google Charts можно изменить цвет одной полосы. Например, я хотел бы, чтобы данные за 2006 год были красными (другие столбцы синего цвета).

 function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);


            chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                             });
}

Ответы на вопрос(6)

https: //developers.google.com/chart/interactive/docs/gallery/columnchart#Color

Вы можете добавить {role: 'style'} в таблицу данных. Для всех столбцов, которые вы хотите иметь одинаковый цвет, просто укажите пустой стиль ''. Затем в столбце, который вы хотите обозначить красным, вы можете просто указать «красный» или «# ff0000» или «цвет: красный» и т. Д.

// example from Google
var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['Copper', 8.94, '#b87333'],            // RGB value
    ['Silver', 10.49, 'silver'],            // English color name
    ['Gold', 19.30, 'gold'],
    ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
 avoliva15 окт. 2015 г., 06:03
почему-то этот ответ не работает, даже если он идет прямо из документов
 Marcel Marino26 сент. 2016 г., 16:57
Это отлично подходит для статических таблиц, но если вам нужно динамически изменять значения и количество значений, я не понимаю, как это может работать. Я попытался вставить цикл for, но, похоже, это не сработало.
 scipilot16 мая 2015 г., 09:32
Я думаю, что это самый правильный ответ. Существует также средство форматирования цвета, но оно не выполняет максимальное значение, поэтому вам придется предварительно рассчитать максимальное значение, а затем установить пороговое значение. Google.visualization.ColorFormat
 mythicalcoder14 мая 2017 г., 19:24
лучший ответ здесь. Документированный способ также. + 1

вам следует добавить еще одну серию, чтобы заставить ее использовать другой цвет, однако, если вы добавитеisStacked: true к вашим параметрам он будет рисовать полосы друг над другом, а не рядом друг с другом, и не будет менять их ширину или выравнивание, поэтому выглядит хорошо. Попробуй это

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'SalesMax');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById('visualization'));
  chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
} ​
 Geoffrey Zheng18 июн. 2013 г., 06:28
-1. Это скопировано из ответа Навина с одним крошечным (хотя и важным) дополнением. Должен был только что прокомментировать / отредактировать оригинальный ответ.
 Vitor Canova04 сент. 2014 г., 21:51
Спасибо, @Synchro. Ваш ответ помог мне изменить цвета из сложенных столбцов. В совершенстве
 Synchro18 июн. 2013 г., 09:30
Ну, в основном это копирование и вставка из оригинального вопроса. Я заслужил @naveen за идею дополнительной серии и хотел предоставить полный рабочий сценарий, который не помещался бы в комментарии, а полный ответ в любом случае не подходит для комментария. Ничто не мешает вам +1 ответить на оба ответа.
 Rob Golding12 сент. 2012 г., 16:06
Превосходно! Я знаю, что это было давно, но я только что боролся с этой же проблемой, и ваше решение приносит удовольствие. Благодарность :

поэтому он будет другого цвета. Вот и все, что можно сделать, я думаю.

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'SalesMax');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
} 
 naveen15 мая 2012 г., 05:42
@ FattyPotatoes: очень верно. Но я думаю, что это единственный вариант.
 FattyPotatoes15 мая 2012 г., 04:23
Я действительно попробовал это и надеялся найти более чистый способ, потому что это меняет выравнивание и ширину полос.

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

    function random_color_part() {
return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}

function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
then simply
$color=random_color();
print "['$rows[1]',$rows[2],'#$color'],\n";

сери Массив объектов или объект с вложенными объектами

Массив объектов, каждый из которых описывает формат соответствующего ряда на диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {}. Если серия или значение не указано, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:

цве - цвет для этой серии. Укажите правильную строку цвета HTML. targetAxisIndex - Какой оси назначить этот ряд, где 0 - это ось по умолчанию, а 1 - противоположная ось. Значение по умолчанию 0; установите 1, чтобы определить диаграмму, в которой разные серии отображаются на разных осях. По крайней мере одна серия должна быть выделена для оси по умолчанию. Вы можете определить другой масштаб для разных осей.

VisibleInLegend - логическое значение, где true означает, что в серии должна быть запись легенды, а false означает, что этого не должно быть. По умолчанию это правда. Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, где у каждого дочернего элемента есть числовой ключ, указывающий, к какой серии он применяется. Например, следующие два объявления идентичны и объявляют первый ряд черным и отсутствующим в легенде, а четвертый - красным и отсутствующим в легенде:

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
Решение Вопроса

который меняет цвет. Обратите внимание, что опция «colors» принимает массив строк.

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};
 nick-s25 дек. 2017 г., 02:15
@ chris ты нашел решение для этого? Похоже, это все еще поведение из коробки.
 chris26 апр. 2016 г., 14:19
Это, кажется, применяет первый цвет в массиве ко всем барам.
 chris05 янв. 2018 г., 15:33
@ nick-s нет, я в конце концов решил переключиться на другую библиотеку.
 user1056121626 дек. 2018 г., 12:32
@ chris Эй, какую библиотеку ты сейчас используешь? я также застрял здесь, чтобы дать несколько цветов для столбцов

Ваш ответ на вопрос