Highstock highcharts I dati irregolari si sbagliano x-scale

Question

Ho dati irregolari. Grafico disegna bene quando io 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/

Ma ho un sacco di dati in modo da devo ingrandire il giorno e scegli highstock. 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 una mezz 'ora gamma 6 gennaio 20: 00-20: 30 assegna più spazio di 2 giorni Gen 11-13. (Ovviamente i dati sono gli stessi.)

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

Answer 1

È necessario impostare la proprietà xAxis.ordinal-false, questo è true per impostazione predefinita. Il valore True indica che i punti devono essere posizionati a intervalli fissi con il numero di spazio (pixel) e False i punti di modifica da posizionare a intervalli fissi con il numero di giri.tempo

xAxis: {  
    ordinal: false 
} 

Linear x-axis | Highstock @ jsFiddle

Answer 2

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

decide in che Dimensioni che l'utente può ingrandire trascinando il mouse. Può essere uno di x, yo xy. Il valore predefinito è "".

Qui è possibile vedere un exmaple here. Per ingrandire un luogo specifico, tieni premuto il tasto sinistro del mouse e seleziona l'area che vuoi ingrandire.

codice HTML:

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

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 "Reset zoom" viene automaticamente visualizzato sul caso zoom ed è facile da manipolare quale parte del grafico si essere mostrato quando viene premuto.

In ogni caso, per ulteriori informazioni ed esempi di impostazioni di zoom, evento e il pulsante si dovrebbe fare riferimento a "Highcharts Options Reference" here. Basta inserire "zoom" nella ricerca.

Come per 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 si otterrà il grafico lineare:

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