Ahora, vamos a pasar por el proceso de creación de un gráfico (columna) en detalle. La creación de los otros dos gráficos es similar y notarán las diferencias en la descripción que sigue.
Preparación de los datos para la carta
Cada biblioteca de gráficos tiene un formato de datos de entrada ligeramente diferente. Ya que estamos usando FusionCharts para nuestro proyecto, necesitamos formatear nuestros datos en un formato que FusionCharts entienda. Acepta los datos JSON como un conjunto de objetos que contienen una etiqueta y un valor. Así es como se ve la sintaxis:
1234567[{"etiqueta": "Naranja", "valor": "90"},{"etiqueta": "Amarillo", "valor": "60"}...]json
Creando la configuración de la carta
La configuración de los gráficos contiene varios atributos del tipo de gráfico, subtítulo, subtítulo y tema, por nombrar algunos. También contiene los datos a ser graficados. ¿Recuerdas esas diferencias en los atributos que acabo de mencionar? Estos incluyen datos, tipo de gráfico, altura y anchura. También hay otros atributos relacionados con el tema, que serán en su mayoría los mismos para los tres gráficos.
La configuración de un gráfico de muestra se parece a esto:
12345678910111213141516171819202122232425{ tipo: "dona2d", renderAt: "producto-ingreso", ancho:$0027100%$0027, alto:400, dataFormato: "json", dataSource: { gráfico:{ leyenda: "Las 5 tiendas más importantes del último mes por ingresos", tema: "carbono"}, datos:[{"etiqueta": "enero", "valor": "657000"},{"etiqueta": "febrero", "valor": "138000"},. ...{"label": "Dec", "value": "730000"}]}}js
Creando un gráfico usando el plugin React
Con la configuración de la carta lista, podemos crear la carta de Reacción. Usaremos la API del plugin de React para crearla. La única entrada del plugin es la configuración que creamos anteriormente. Podemos crearla simplemente usando el siguiente código.
1<react_fc.FusionCharts{...countryChartConfigs}/{...countryChartConfigs};jsx
El gráfico que creamos arriba es un gráfico de columnas, los otros dos gráficos son spline y donut. Crearemos configuraciones de gráficos para estos dos y mencionaremos los tipos correctos y crearemos el componente de gráfico de Reacción.
12<react_fc.FusionCharts{...monthlyChartConfigs}/{ };jsx
Ahora necesitamos colocar los tres componentes de la carta apropiadamente en el JSX de la DashboardApp que creamos anteriormente. Este es el nuevo JSX después de colocar los componentes del gráfico.
1234567891011121314151617<div><h1className="main-title"``Acme Inc. Análisis de los ingresos para 2015</h1;div;/div;;divclassName="chart-row"/div;;div;;reacciona_fc.FusionCharts{...countryChartConfigs}/;;/div;;/div;;/div;;divclassName="chart-row";divclassName="inline-chart";/reacciona_fc. FusionCharts{...monthlyChartConfigs}/{N-]/div ]};divclassName="inline-chart"³³³"react_fc.FusionCharts{...productChartConfigs}/{N-]/div ]³³³³³³³³³³³³"inlinechart"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³"".
jsx
Después de añadir esto deberías ver el tablero de mandos renderizado en tu página. Si tienes algún problema o quieres ver el código fuente del proyecto, dirígete al repositorio GitHub del proyecto.