Biblioteca de gráficos de JavaScript el mercado de valores-dailyChart

Vista prévia

Descripción

dailyChart es una biblioteca de gráficos de JavaScript que utiliza el elemento SVG para representar un gráfico de líneas dinámico y totalmente configurable para el mercado de valores.

Funcionamiento

Instale la biblioteca a través del administrador de paquetes.

# NPM
$ npm install dailychart --save

O incluya la versión compilada y minimizada de la biblioteca dailyChart en la parte inferior de la página.

<script src="dist/dailychart.min.js"></script>

Cree un elemento de marcador de posición para el gráfico de cotizaciones y especifique los datos utilizando los siguientes atributos de datos:

• Data-dailychart-valores: puntos
• Data-dailychart-Close: el valor de cierre de la sesión de Trading anterior
• Data-dailychart-longitud: el número de puntos en la sesión de Trading

<div class="chart" id="chart-example" data-dailychart-values="1292.2,1292.0,1292.1,1291.8,1291.8,1292.1,1291.9,1291.6,1291.7,1291.7,1291.6,1291.8,1291.6,1291.7,1292.0,1291.6,1291.4,1291.2,1290.5,1290.5,1290.6,1290.5,1290.4,1289.8,1289.5,1290.0,1289.6,1289.7,1289.1,1288.8,1289,1289.2,1289.4,1289.7,1289.7,1289.6,1289.2,1290.1,1290.3,1290.5,1290.7,1292.3,1292.5,1291.7,1292.1,1292.1,1292.6,1292.7,1292.8,1292.7,1292.2,1291.7,1292.1,1292.1,1291.7,1291.2,1291.7,1291.9,1291.6,1292.1,1292.5,1293.6,1293.3,1293.8,1293.9,1293.5,1293.7,1293.6,1294.1,1295.0,1296.9,1297.0,1296.3,1296.5,1296.6,1296.6,1296.1,1296.4,1296.1,1296.5,1296.7,1296.0,1296.1,1296.7,1296.1,1296.1,1296.2,1296.0,1296.1,1295.9,1295.7,1296.0,1296.4" data-dailychart-close="1292.0" data-dailychart-length="93"></div>

Inicializar el gráfico de valores con la configuración predeterminada.

new Dailychart(document.getElementById('chart-example'));

Personaliza las apariencias de la tabla de acciones.

new Dailychart(document.getElementById('chart-example'),{


width: undefined,


height: undefined,


lineWidth: 1,


colorPositive: '#33AE45',


colorNegative: '#EB5757',


fillPositive: '',


fillNegative: '',


closeWidth: 1,


closeColor: '#e0e0e0'
});