С помощью графической диаграммы 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'}}
});
}
Вот пример кода, который меняет цвет. Обратите внимание, что Опция "colors" принимает массив строк.
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
colors: ['red','green'],
is3D:true
};
Обратитесь к https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
Вы можете добавить {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
]);
Как предложил Навен, вы должны добавить еще одну серию, чтобы использовать ее другим цветом, однако, если вы добавите isStacked: true к своим опциям, она будет нарисовать бары друг на друга, а не рядом друг с другом, t меняет их ширину или выравнивание, поэтому выглядит хорошо. Попробуйте следующее:
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}]
});
}
Вы всегда можете вставить дополнительный столбец, поэтому он будет иметь другой цвет. То, что можно сделать, я думаю.
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}]
});
}
series Массив объектов или объект с вложенными объектами
Массив объектов, каждый из которых описывает формат соответствующей серии на диаграмме. Чтобы использовать значения по умолчанию для серии, укажите пустой объект {}. Если номер или значение не указано, будет использовано глобальное значение. Каждый объект поддерживает следующие свойства:
цвет - цвет, используемый для этой серии. Укажите допустимую цветовую строку HTML. targetAxisIndex - какая ось назначает эту серию, где 0 - ось по умолчанию, а 1 - противоположная ось. Значение по умолчанию - 0; установить в 1, чтобы определить диаграмму, где разные серии отображаются против разных осей. По меньшей мере одна серия будет распределена по оси по умолчанию. Вы можете определить другой масштаб для разных осей.
visibleInLegend - логическое значение, где true означает, что серия должна иметь запись легенды, а false означает, что она не должна. Значение по умолчанию - true. Вы можете указать либо массив объектов, каждый из которых применяется к серии в указанном порядке, либо вы можете указать объект, в котором каждый ребенок имеет числовой ключ, указывающий, к какой серии он относится. Например, следующие два объявления идентичны и объявляют первую серию черной и отсутствуют в легенде, а четвертый - как красный и отсутствуют в легенде:
series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
Я решаю эту проблему, используя метод стиля ролей для диаграмм, генерирующих динамические данные. Я использовал случайную функцию для генерации цвета
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";
Вот пример приведенных выше советов
google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawStacked)
function mt_rand (min, max) {
var argc = arguments.length
if (argc === 0) {
min = 0
max = 2147483647
} else if (argc === 1) {
throw new Error('Warning: mt_rand() expects exactly 2 parameters, 1 given')
}
return Math.floor(Math.random() * (max - min + 1)) + min
}
function dechex (d) {
var hex = Number(d).toString(16)
hex = '000000'.substr(0, 6 - hex.length) + hex
return hex
}
function str_pad (str) {
str += ''
while (str.length < 3) {
str = str + str
}
return str
}
function random_color_part () {
// return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', 1);
return mt_rand(0, 255)
}
function random_color () {
return 'rgb(' + random_color_part() + ',' + random_color_part() + ',' + random_color_part() + ')'
}
let $color = random_color()
// alert($color);
function drawStacked () {
// var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['cor-glenio-aleatoria', 8.94, random_color()], // RGB value
['cor-arlei-aleatoria', 10.49, random_color()], // English color name
['outra cor', 19.30, random_color()],
['outra cor fixa', 21.45, 'color: #e5e4e2' ] // CSS-style declaration
])
var options = {
title: 'Motivation and Energy Level Throughout the Day',
isStacked: true,
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'))
chart.draw(data, options)
}
https://jsfiddle.net/zeh3pn6d/2
Просто оставьте это здесь, на случай, если кто-то столкнется с той же проблемой, что и я:
У меня была похожая проблема, когда я не мог изменить цвет определенных столбцов в гистограмме. Я сделал, как сказано в документации, и попробовал некоторые ответы здесь, но ничего не получалось.
Оказалось, мне просто нужно было изменить google.charts.Bar на google.visualization.ColumnChart.