11 февр. 2015 г., 13:32 отK-GunFattyPotatoes

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'}}
                             });
}

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

05 июл. 2014 г., 14:12 отJosh Lopez

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
]);
31 мая 2012 г., 14:24 отSynchro

вам следует добавить еще одну серию, чтобы заставить ее использовать другой цвет, однако, если вы добавите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}]
                             });
} ​
15 мая 2012 г., 00:08 отnaveen

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

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}]
                             });
} 
04 апр. 2017 г., 12:29 отuser3226750

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

    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";
19 авг. 2013 г., 02:00 отAFetter

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

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

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

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

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
09 авг. 2012 г., 06:00 отsloth

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

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};

ВАШ ОТВЕТ НА ВОПРОС