Red de conocimiento informático - Material del sitio web - Cómo diseñar un gráfico interactivo HTML5 basado en PHP

Cómo diseñar un gráfico interactivo HTML5 basado en PHP

Implemente gráficos basados ​​en web de nivel profesional en PHP sin conocimientos profundos de HTML5 y JavaScript.

Introducción

Recientemente, necesitaba crear rápidamente un gráfico a partir de un conjunto de conjuntos de datos PHP. Los gráficos deben ser interactivos, fáciles de usar y descargables. Después de evaluar varias soluciones de gráficos PHP, incluidas phpChart, pChart y Highcharts, me decidí por phpChart como mi herramienta preferida.

Antecedentes

Como programador back-end principal, no tengo mucho tiempo para estudiar lentamente el uso de JavaScript (los clientes quieren ver gráficos en línea dentro de las 24 horas), ni Conocimientos avanzados de codificación front-end. Básicamente, quiero que los desarrolladores PHP con apenas experiencia en programación front-end puedan desarrollar rápidamente gráficos hermosos.

Probé pChart, una popular biblioteca de gráficos PHP. Los gráficos generados se ven bastante bien, aunque se pueden descargar, pero todos los gráficos son imágenes estáticas. Highcharts parece ser la mejor opción. El gráfico se ve impresionante, está animado y tiene muchas opciones de personalización, pero al mismo tiempo, también es muy complejo y requiere muchos conocimientos de JavaScript. Highcharts no está diseñado para PHP ni es gratuito para uso empresarial.

Los elementos básicos de phpChart

Lo que más me gusta de phpChart es que permite a las personas comenzar con simplicidad y la mínima cantidad de código.

La versión lite de phpChart se puede descargar desde aquí. Descargue el archivo y extráigalo al directorio raíz del sitio web.

Configurar conf.php

Lo primero que tenemos que hacer es configurar la variable SCRIPTPATH ​​a la biblioteca de clases PhpChart en el archivo conf.php. Esta variable representa la URL relativa o absoluta de la biblioteca phpChart en su servidor web.

define(SCRIPTPATH,/phpChart/);

Copiar código

Crear el gráfico más simple

Incluye el archivo de encabezado PHP conf. :

require_once(../conf.php);

Copiar código

Llame al constructor C_PhpChartX y finalmente llame a la función draw().

$pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), 'simplest_graph');

$pc-draw(); p>

Copiar código

Este es el código que necesita para comenzar. A continuación se muestra el resultado renderizado.

Esto es lo que yo llamo codificación mínima. No tiene sentido aprender los conceptos básicos de la manera más difícil cuando tienes un equipo de programadores trabajando en ello. Una cosa que cualquier programador quiere hacer lo antes posible es sumergirse en documentación compleja de un nuevo conjunto de bibliotecas o herramientas.

Por cierto, el nombre del segundo parámetro en el constructor debe ser exclusivo de su gráfico. Escribí "simplest_graph", pero podría ser cualquier cadena sin espacios. Debe ser un valor único para que pueda tener varios gráficos en una página.