Biblioteca completa de visualización de datos destacados-TUI. Chart

Vista prévia

Descripción

TUI. Chart es una biblioteca de visualización de datos de JavaScript que hace uso de Rapha à « l. js para crear una amplia variedad de gráficos & gráficos utilizando SVG.

Charts & Graphs supported:

• Gráfico de área
• Gráfico de barras
• Gráfico de diagrama de caja
• Gráfico de burbujas
• Gráfico de viñetas
• Gráfico de columnas
• Gráfico combinado de línea de columna
• Gráfico de mapa térmico
• Gráfico combinado de área de línea
• Gráfico de líneas
• Gráfico combinado de dispersión de línea
• Gráfico de mapa
• Gráfico circular
• Gráfico de tartas Combo
• Gráfico radial
• Gráfico de dispersión
• Gráfico de Treemap

¿Cómo funciona?

Instalación con NPM:

# NPM
$ npm install tui-chart --save

Importe el paquete TUI-Chart.

// ES 6
import chart from 'tui-chart';

// CommonJS:
const chart = require('tui-chart');

Cree un elemento contenedor en el que desee colocar el gráfico.

<div id="myChart">
</div>

Prepare los datos para que se trazen en el gráfico.

var data = {


categories: ['June', 'July', 'Aug', 'Sep', 'Oct', 'Nov'],


series: [




{






name: 'Budget',






data: [5000, 3000, 5000, 7000, 6000, 4000]




},




{






name: 'Income',






data: [8000, 1000, 7000, 2000, 5000, 3000]




}


]
};

Pase la configuración opcional.

var options = {


chart: {




width: 1160,




height: 650,




title: 'Monthly Revenue',




format: '1,000'


},


yAxis: {




title: 'Month'


},


xAxis: {




title: 'Amount',




min: 0,




max: 9000,




suffix: '$'


},


 series: {




 showLabel: true


 }
};

Aplicar temas personalizados.

var theme = {


series: {




colors: [






'#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',






'#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'




]


}
};

Genere un gráfico de barras básico en la página.

var container = document.getElementById('myChart');
tui.chart.barChart(container, data, options);