Tengo un gráfico que usa la biblioteca Highcharts, mi gráfico se ve así:

https://www.highcharts.com/demo/spline-plot-bands

Sin embargo, el eje X se compone de fechas y no tiene límites. ¿Me gustaría saber cómo colocar una barra de desplazamiento horizontal (en el eje X)?

Uso Ionic 3. Traté de usar highstock, pero no tuve éxito. ¿Alguien podría ayudarme? Me gustaría ver una muestra de código usando highstock, gracias.

1
bcosta 23 feb. 2018 a las 22:18

3 respuestas

La mejor respuesta

La opción de la que está hablando se llama navegador y existe solo en highstock. El navegador está habilitado de forma predeterminada para la primera serie en todos los gráficos de Highstock. Para usar highstock en Angular o Ionic, use esto en su archivo o página ts:

import * as Highcharts from "highcharts/highstock";

Aquí hay un pequeño ejemplo de cómo se ve el navegador:

var seriesOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];

/**
 * Create the chart when all data is loaded
 */
function createChart() {

    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 4
        },

        plotOptions: {
            series: {
                showInNavigator: true
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} USD</b><br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

$.each(names, function (i, name) {

    $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',    function (data) {

        seriesOptions[i] = {
            name: name,
            data: data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === names.length) {
            createChart();
        }
    });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
1
Melchia 24 feb. 2018 a las 07:32

Use require('highcharts/highmaps') en lugar de require('highcharts') en las importaciones

@NgModule({
    ...
   imports: [
    BrowserModule, 
     ChartModule.forRoot( 
      require('highcharts/highmaps')
      ],
})
-1
Shree 4 jun. 2019 a las 08:37

La única forma en que sé usar una barra de desplazamiento horizontal en gráficos altos es mediante el navegador y el desplazamiento:

https://www.highcharts.com/docs/chart-concepts/navigator

https://www.highcharts.com/docs/chart-concepts/scrollbar

Pero según el documento anterior, solo está disponible para productos de alta calidad. Entonces trataría de hacer que eso funcione. (Lo he usado con éxito)

También hay zoom y panorámica, pero dudo que eso sea lo que quieres.

zoomType: 'x',
panning: true,
0
Ari 23 feb. 2018 a las 20:19