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