javascript - node - Los datos irregulares Highstock Highcharts se equivocan a escala X

highcharts npm

Question

Tengo datos irregulares. Chart dibuja bien cuando uso Highcharts :

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: ''chart''
  },
  xAxis: {
    type: ''datetime''
  },
  series: [{
    name: ''Volume'',
    data: chart_arr,
  }]
});
});

http://jsfiddle.net/KnTaw/9/

Pero tengo muchos datos, así que necesito ampliar la fecha y elegir Highstock . Entonces sucede algo extraño: el eje x se vuelve no lineal.

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: ''chart2''
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: ''datetime''
    },
    series: [{
      name: ''val'',
      data: chart_arr,
      type : ''area'',
    }]
  });
});

http://jsfiddle.net/Mc3mW/1/

Tenga en cuenta que los datos para el rango de media hora Ene 6 ​​20: 00-20: 30 asigna más espacio que 2 días Ene 11-13. (Por supuesto, los datos son los mismos).

¿Cómo puedo forzar que el eje x en altura se convierta en lineal? ¿O cómo puedo habilitar una herramienta de zoom inferior para los gráficos altos? Gracias.

Answer 1

Es posible hacer zoom en su gráfico utilizando la biblioteca JavaScript de HighCharts. La propiedad que debe establecer es zoomType

Decide en qué dimensiones el usuario puede acercarse arrastrando el mouse. Puede ser uno de x, y o xy. Predeterminado a "".

Aquí puedes ver un ejemplo aquí . Para hacer zoom en un lugar específico, mantenga presionado el botón izquierdo del mouse y seleccione el área que desea ampliar.

Código HTML:

<div id="container" style="height: 400px"></div>​

Código de JavaScript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: ''container'',
            type: ''line'',
            zoomType: ''x''
        },
        
        xAxis: {
            categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

Además, un botón "Restablecer zoom" se muestra automáticamente en el evento de zoom y es fácil de manipular qué parte del gráfico se mostrará cuando se presione.

De todos modos, para obtener más información y ejemplos de configuración de zoom, evento y botón, debe consultar "Referencia de opciones de Highcharts" aquí . Simplemente ingrese "zoom" en la búsqueda.

En cuanto a su otra pregunta: "Cómo hacer que StockChart sea lineal" según HighStock API, el tipo predeterminado del gráfico es lineal. Lo que está sucediendo aquí es causado por la opción de área que ha establecido en la propiedad de la serie. Solo elimínalo así y obtendrás tu gráfica lineal:

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: ''chart2''
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: ''datetime''
    },
    series: [{
      name: ''val'',
      data: chart_arr
    }]
  });
});

Answer 2

Tendrá que establecer la propiedad xAxis.ordinal en false , esto es true por defecto. True valor indica que los puntos deben colocarse a intervalos fijos en el espacio wrt (píxeles) y False cambia los puntos que se colocarán a intervalos fijos durante el tiempo

xAxis: {       
    ordinal: false
}

Eje lineal x | Highstock @ jsFiddle