Puedes usar las herramientas de los gráficos de Google con su configuración predeterminada. Todas las opciones de personalización son opcionales y la configuración básica está lista para el lanzamiento. Sin embargo, los gráficos se pueden personalizar fácilmente en caso de que tu página web adopte un estilo que no coincida con los valores predeterminados. Cada gráfico expone una serie de opciones que personalizan su apariencia. Estas opciones se expresan como pares nombre:valor en el objeto de opciones que se pasa al método draw() de un gráfico.
Por lo general, los gráficos admiten opciones personalizadas adecuadas para esa visualización.
Por ejemplo, el gráfico de tabla admite una opción sortColumn para especificar la columna de orden predeterminada, y la visualización de gráfico circular admite una opción colors que te permite especificar los colores de los fragmentos. En la documentación de cada gráfico, se deben describir las opciones que admite.
Pasarás las opciones como un segundo parámetro opcional al método draw() del gráfico que se describió anteriormente. Para especificar las opciones, crea un objeto con propiedades específicas de cada gráfico.
En el siguiente ejemplo, se muestra cómo crear un objeto de opciones que especifique todas estas propiedades:
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
chart.draw(data, options);
Este es el gráfico que crea este código.
|
|
También puedes especificar opciones literalmente dentro del 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
});
Este es el gráfico que crea este código.
|
|
Más información