Como personalizar gráficos

Você pode usar as Ferramentas de gráficos do Google com a configuração padrão: toda a personalização é opcional e a configuração básica está pronta para lançamento. No entanto, os gráficos podem ser facilmente personalizados caso sua página da Web adote um estilo que esteja em desacordo com os padrões fornecidos. Cada gráfico expõe várias opções que personalizam a aparência. Essas opções são expressas como pares de "name:value" no objeto de opções transmitido para o método draw() de um gráfico.

Os gráficos geralmente são compatíveis com opções personalizadas apropriadas para essa visualização. Por exemplo, o gráfico de tabelas oferece suporte a uma opção sortColumn para especificar a coluna de classificação padrão, e a visualização do gráfico de pizza oferece suporte a uma opção colors que permite especificar cores de fatias. A documentação de cada gráfico precisa descrever as opções que ele aceita.

Você transmitirá as opções como um segundo parâmetro opcional para o método draw() do gráfico descrito anteriormente. Para especificar opções, crie um objeto com propriedades específicas para cada gráfico.

O exemplo a seguir demonstra a criação de um objeto de opções que especifica todas essas propriedades:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

Veja o gráfico que esse código cria.

Também é possível especificar opções de maneira literal no método draw():

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

Veja o gráfico que esse código cria.

Mais informações