I dati irregolari di Highstock highcharts hanno una scala x errata

Ho dati irregolari. Il grafico si disegna bene quando utilizzo i diagrammi elevati :

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

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

Ma ho molti dati, quindi ho bisogno di zoomare sulla data e scegliere il prezzo più alto . Poi accade una cosa strana: l’asse x diventa non lineare.

 $(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/

Si prega di notare che i dati per un intervallo di mezz’ora 6 gennaio 20: 00-20: 30 assegna più spazio di 2 giorni gennaio 11-13. (Ovviamente i dati sono gli stessi).

Come posso forzare l’asse x in posizione alta per diventare lineare? Oppure Come posso abilitare uno strumento di zoom in basso per i grafici alti? Grazie.

Sarà necessario impostare la proprietà xAxis.ordinal su false , questo è true per impostazione predefinita. True valore True indica che i punti devono essere posizionati a intervalli fissi in spazio (pixel) e False cambia punti da posizionare a intervalli fissi in tempo

 xAxis: { ordinal: false } 

Asse x lineare | Highstock @ jsFiddle

È ansible ingrandire il grafico utilizzando la libreria JavaScript di HighCharts. La proprietà che dovresti impostare è zoomType

Decide in quali dimensioni l’utente può ingrandire trascinando il mouse. Può essere uno di x, yo xy. Il valore predefinito è “”.

Qui puoi vedere un exmaple qui . Per ingrandire un luogo specifico, tieni premuto il tasto sinistro del mouse e seleziona l’area che vuoi ingrandire.

Codice HTML:

 

Codice 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]         }]   }); });​ 

Inoltre, un pulsante “Ripristina zoom” viene automaticamente visualizzato sull’evento di zoom ed è facile manipolare quale parte del grafico verrà visualizzata quando viene premuto.

In ogni caso, per ulteriori informazioni ed esempi di impostazioni dello zoom, evento e pulsante, fare riferimento a “Riferimento opzioni Highcharts” qui . Basta inserire “zoom” nella ricerca.

Per quanto riguarda la tua altra domanda: “Come rendere lineare lo StockChart” secondo l’API di HighStock il tipo predefinito del grafico è lineare. Quello che sta accadendo qui è causato dall’opzione area che hai impostato nella proprietà series. Basta rimuovere in questo modo e otterrai il grafico lineare:

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