HighStock setExtremes en angular HighStock HighStock setExtremes es una función en la biblioteca HighStock que se utiliza para establecer los extremos del rango visible en un gráfico. Al llamar a esta función, se pueden especificar valores mínimos y máximos para el eje x y el eje y. En el contexto de angular HighStock, se puede usar el componente HighStockChart para crear un gráfico y luego llamar a la función setExtremes para establecer los extremos deseados. Aquí hay un ejemplo de cómo se puede usar HighStock setExtremes en angular HighStock: // Importar módulos necesarios import { Component } from ‘@angular/core’; import * as HighStock from ‘highcharts/highstock’; @Component({ selector: ‘app-highstock-chart’, template: `

` }) export class HighStockChartComponent { chartId = ‘highstock-chart’; constructor() { this.createChart(); } createChart() { const chartOptions: HighStock.Options = { chart: { type: ‘line’ }, title: { text: ‘HighStock setExtremes en angular HighStock’ }, series: [{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }] }; HighStock.stockChart(this.chartId, chartOptions, (chart) => { // Establecer extremos en el eje x chart.xAxis[0].setExtremes(3, 7); // Establecer extremos en el eje y chart.yAxis[0].setExtremes(2, 8); }); } } En este ejemplo, se crea un componente HighStockChart con un gráfico de línea. Después de crear el gráfico, se llama a la función setExtremes en los ejes x e y del gráfico para establecer los extremos en los valores deseados (3 y 7 en el eje x, 2 y 8 en el eje y). Este es solo un ejemplo de cómo usar HighStock setExtremes en angular HighStock. Hay muchas otras opciones y configuraciones disponibles en la biblioteca HighStock para adaptarse a las necesidades específicas de su proyecto.

Answer

1. 

   davy.ai

   July 22, 2023 at 11:14 am

   Para establecer el tamaño personalizado del selector de rango del xAxis en un gráfico HighStock utilizando el método setExtremes en un componente Angular, puedes seguir los siguientes pasos:

   1. Importa la biblioteca de Highcharts y sus dependencias en tu componente.

   import * as Highcharts from 'highcharts/highstock';
   import HighchartsMore from 'highcharts/highcharts-more';
   import { Options } from 'highcharts/highstock';
   

   1. Crea un objeto chartOptions y define las opciones del selector de rango del xAxis.

   chartOptions: Options = {
     xAxis: {
       events: {
         afterSetExtremes: (
           e: Highcharts.AxisSetExtremesEventObject
         ) => {
           console.log('Evento afterSetExtremes del xAxis:', e);
         }
       },
       range: 3 * 30 * 24 * 3600 * 1000, // 3 meses
       showLastLabel: true,
       rangeSelector: {
         enabled: true,
         inputEnabled: false,
         buttonPosition: {
           x: -15
         },
         buttonSpacing: 15,
         buttonTheme: {
           width: 60
         },
         buttons: [
           {
             type: 'day',
             count: 1,
             text: '1D'
           },
           {
             type: 'day',
             count: 7,
             text: '7D'
           },
           {
             type: 'month',
             count: 1,
             text: '1M'
           },
           {
             type: 'month',
             count: 3,
             text: '3M'
           },
           {
             type: 'month',
             count: 6,
             text: '6M'
           },
           {
             type: 'ytd',
             text: 'YTD'
           },
           {
             type: 'year',
             count: 1,
             text: '1Y'
           },
           {
             type: 'all',
             text: 'ALL'
           }
         ]
       }
     },
     series: [
       {
         name: 'AAPL',
         data: [...],
         tooltip: {
           valueDecimals: 2
         }
       }
     ]
   };
   

   1. En la función ngOnInit de tu componente, crea un nuevo gráfico Highcharts y llama al método setExtremes con las fechas de inicio y fin deseadas del xAxis.

   ngOnInit() {
     this.chart = Highcharts.stockChart('container', this.chartOptions);
     const startDate = Date.now() - 30 * 24 * 3600 * 1000; // 30 días atrás
     const endDate = Date.now();
     this.chart.xAxis[0].setExtremes(startDate, endDate);
   }
   

   Ahora, cuando se crea el gráfico HighStock, mostrará el selector de rango del xAxis con el tamaño personalizado definido en el método setExtremes sin necesidad de hacer clic en ningún botón.

Comments are closed.