1d88d5b296
Add complete translations for: - German (de) - French (fr) - Spanish (es) - Portuguese Brazil (pt-br) - Portuguese Portugal (pt-pt) Changes include: - Language config files (languages.*.toml) - Menu config files (menus.*.toml) - Translated docs section (16 files x 5 langs) - Translated homepage, guides, samples - Translated examples, authors, tags sections - Translated users section (112 dirs x 5 langs) - Fixed YAML front matter formatting in user files Hugo build now supports 9 languages total. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2.5 KiB
title, date, description, summary, tags, showDate, type
| title | date | description | summary | tags | showDate | type | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| Gráficos | 2019-03-06 | Guía de uso de Chart.js en Blowfish | Blowfish incluye Chart.js para gráficos y visualizaciones de datos potentes. |
|
false | sample |
Blowfish soporta Chart.js usando el shortcode chart. Simplemente envuelve el markup del gráfico dentro del shortcode. Blowfish adapta automáticamente los temas de los gráficos al parámetro colorScheme configurado, aunque los colores pueden personalizarse usando la sintaxis normal de Chart.js.
Consulta la documentación del [shortcode chart]({{< ref "docs/shortcodes#chart" >}}) para más detalles.
Los ejemplos siguientes son una pequeña selección tomada de la documentación oficial de Chart.js. También puedes ver el código fuente de la página en GitHub.
Gráfico de barras
{{< chart >}} type: 'bar', data: { labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'], datasets: [{ label: 'Mi primer dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] } {{< /chart >}}
Gráfico de líneas
{{< chart >}} type: 'line', data: { labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'], datasets: [{ label: 'Mi primer dataset', data: [65, 59, 80, 81, 56, 55, 40], tension: 0.2 }] } {{< /chart >}}
Gráfico de anillo
{{< chart >}} type: 'doughnut', data: { labels: ['Rojo', 'Azul', 'Amarillo'], datasets: [{ label: 'Mi primer dataset', data: [300, 50, 100], backgroundColor: [ 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 205, 86, 0.7)' ], borderWidth: 0, hoverOffset: 4 }] } {{< /chart >}}