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

21

С помощью гистограммы 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   ответов
21

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

Вы можете добавить {role: & apos; style & apos; } к вашей таблице данных. Для всех столбцов, которые вы хотите иметь одинаковый цвет, просто укажите пустой стиль ". Затем в столбце, который вы хотите обозначить красным, вы можете просто указать «красный». или "# 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
]);
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededgoogle.visualization.ColorFormat
Error: User Rate Limit Exceeded
32

& Quot; цвет & Quot; Опция принимает массив строк.

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};
@ Крис, ты нашел решение для этого? Похоже, это все еще поведение из коробки.
@ Крис, эй, какую библиотеку ты сейчас используешь? я также застрял здесь, чтобы дать несколько цветов для столбцов
@ nick-s нет, я в конце концов решил переключиться на другую библиотеку.
Это, кажется, применяет первый цвет в массиве ко всем барам.
3

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

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: tru,e}, {color: 'red', visibleInLegend: false}]
                             });
} 
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded FattyPotatoes
5

вы должны добавить еще одну серию, чтобы заставить ее использовать другой цвет, однако, если вы добавите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}]
                             });
} ​
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
1

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

    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";
1

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

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

colorError: User Rate Limit Exceeded

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

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}

Похожие вопросы