Aquel que conozca un poco mis gustos en la informática, sabrá que la biblioteca de Anychart, además de ser completísima, tiene multitud de ejemplos completos y con posibilidades de modificación, excelente documentación y un soporte técnico que rápidamente responde con una o varias soluciones, es mi preferida para representar gráficos de todos los tipos.
Objetivo
Estudiar cómo la misma solución de gráficos que tiene PHPrunner se puede utilizar en React.
Demo: https://fhumanes.com/anychart-react/
Solución Técnica
He publicado este ejemplo tan simple, porque deseo mostrar lo sencillo que es la utilización de este tipo de gráfico en React.
Próximamente, tengo previsto reproducir los mismos gráficos que se ve en el ejemplo de «Map Anychart» en la plataforma React, pero como entiendo que esos ejemplos son poco didácticos, un ejemplo muy simple servirá para que más desarrolladores analicen si es lo que ellos necesitan.
Una vez creado el proyecto React con el comando: npx create-react-app <dir>
He instalado el producto de Anychart con el comando : npm install anychart
No sé si porque he utilizado React 19 o por esta biblioteca, también tuve que instalar «Ajv JSON schema validator» npm install ajv
Para la personalización del idioma y del tema, la forma que he visto que funciona, es añadiendo los ficheros correspondientes en el fichero «index.html»:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="https://cdn.anychart.com/releases/8.13.0/locales/es-es.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/themes/light_earth.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
En las líneas 28 y 29 he añadido el idioma (español) y un tema, que fija nuevos aspectos (light_earth.js).
El ejemplo que podéis ver:
Y para ello el código React es:
import { useEffect, useRef } from "react";
import anychart from "anychart";
/**
* SimplePieChart Component
* Encapsulated React component rendering a basic AnyChart Pie Chart.
* No props required; all chart-related logic is self-contained.
*/
const SimplePieChart = () => {
// Scope: References
// We use a `ref` to keep track of the AnyChart chart instance for proper cleanup
const chartRef = useRef(null);
useEffect(() => {
/**
* MAIN CHART LOGIC STARTS HERE
* This function sets up the chart, adds data, and customizes its appearance.
*
*/
const drawChart = () => {
// Define the data to be displayed in the pie chart.
const data = [
{ x: "Cycling", value: 10.25 },
{ x: "Swimming", value: 12 },
{ x: "Running", value: 18 },
{ x: "Hiking", value: 11 },
{ x: "Alpinism", value: 9 },
];
// Ensure the chart is only created once to avoid duplicates.
if (!chartRef.current) {
console.log("Se va a iniciar el recurso 'cartRef'");
// Create the pie chart instance
const chart = anychart.pie(data);
anychart.theme('lightEarth');
anychart.format.outputLocale('es-es');
// Set your licence key before you create chart.
anychart.licenseKey('xxxxxxxxx-9a9a9a9a9-9a9a9a9a');
// Set logo source.
// You can't customize credits without a license key. See https://www.anychart.com/buy/ to learn more.
var credits = chart.credits();
credits.enabled(false);
credits.logoSrc('');
// Add a title to the chart
chart.title("Activity Distribution");
var tooltip = chart.tooltip();
tooltip.format("Valor: {%value} \nVotos válido: {%value}{type:number,decimalsCount:2}%");
// Specify the container for the chart and draw it
chart.container("container");
chart.draw();
// Save the chart instance to the ref for cleanup on unmount
chartRef.current = chart;
}
};
// Call the chart-drawing function when the component is mounted
drawChart();
// Dispose of the chart instance when the component is unmounted
return () => {
if (chartRef.current) {
console.log("Se está limpiando el recurso 'cartRef'");
chartRef.current.dispose();
chartRef.current = null;
}
};
}, []); // Dependency array ensures this effect runs only once
return (
<>
{/* This is where the AnyChart Pie Chart will be rendered */}
<div id="container" style={{ width: "100%", height: "600px" }}></div>
</>
);
};
export default SimplePieChart;
Con la clave de Anychart que trae el producto PHPRunner, te deja eliminar el logo de «Trial».
Os dejo el fuente del proyecto React.
Adjuntos
| Archivo | Tamaño de archivo | Descargas |
|---|---|---|
anychart-react (Fuente React)
|
179 KB | 20 |