Los datos irregulares Highstock Highcharts se equivocan a escala X

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 date 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 count que los datos para el range 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 charts altos? Gracias.

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 time

 xAxis: { ordinal: false } 

Eje lineal x | Highstock @ jsFiddle

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. Pnetworkingeterminado a "".

Aquí puedes ver un ejemplo aquí . Para hacer zoom en un lugar específico, mantenga presionado el button izquierdo del mouse y select 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 button "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 get más información y ejemplos de configuration de zoom, evento y button, 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 pnetworkingeterminado 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 }] }); });