Диаграммы Google - изменение цвета отдельной панели

С помощью графической диаграммы 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'}}
                             });
}

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Обратитесь к 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
]);

Ответ 3

Как предложил Навен, вы должны добавить еще одну серию, чтобы использовать ее другим цветом, однако, если вы добавите 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}]
                             });
} ​

Ответ 4

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

Ответ 7

Вот пример приведенных выше советов

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

Ответ 8

Просто оставьте это здесь, на случай, если кто-то столкнется с той же проблемой, что и я:

У меня была похожая проблема, когда я не мог изменить цвет определенных столбцов в гистограмме. Я сделал, как сказано в документации, и попробовал некоторые ответы здесь, но ничего не получалось.

Оказалось, мне просто нужно было изменить google.charts.Bar на google.visualization.ColumnChart.