xaxis font eje javascript datetime graph charts highcharts

javascript - font - xaxis highcharts



Highcharts-muestra cada otra categoría de eje x (4)

He configurado Highcharts para mostrar un gráfico con un grupo de categorías de xAxis. Todo esto funciona bien, pero me gustaría poder omitir algunas de las categorías de xAxis, así que no se muestra todo. Puede ver un ejemplo de esto trabajando en la sección de informes de Campaign Monitor (captura de pantalla: http://screencast.com/t/Y2FjNzQ4Y ).

¿Alguna idea de cómo puedo lograr este mismo diseño?


Aquí está mi solución fea :)

Estoy usando la matriz como cola. http://javascript.about.com/library/blqueue.htm Si completa los datos de puntos en la cola, puede establecer los datos de su serie de gráficos.

var myQueue = new Array(); var myPoint = [x, y]; myQueue.push(myPoint); chart.series[0].setData(myQueue); my X axis is not a datetime, it''s an integer first var x = 0;

El valor de x siempre debe incrementarse cuando necesite un nuevo punto. http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png


Parece que xAxis: labels: step value es lo que debe usarse para lograr esto:

xAxis: { categories: [''JAN'', ''FEB'', ''MAR'', ''APR'', ''MAY''], labels:{ step: 2 // this will show every second label } },

Etiquetas del Eje de Paso

Súper tarde, pero me imagino que esto puede ayudar a alguien.


Puede establecer el tipo de xAxis como ''datetime'' y luego establecer pointInterval y PointStart en las opciones de trazado.

Ejemplo de código:

var chart; $(document).ready(function () { chart = new Highcharts.Chart({ "xAxis": { "type": "datetime" "plotOptions": { "line": { "pointInterval": 86400000, "pointStart": 1282408923000 } }, }); });

Las cifras que ve para pointInterval y Start están en milisegiones que puede generar usando getTime() El intervalo en su caso sería 86400000ms, que es un día. La biblioteca muestra los intervalos adecuados en función de su intervalo de datos.


xAxis: { categories: categoriesname, labels: { style: { color: ''#000'', font: ''9px Trebuchet MS, Verdana, sans-serif'' } }, **tickInterval: TickInterval,**// SET THIS tickPixelInterval: 80, tickmarkPlacement: ''on'' },