Highstock highcharts irreguläre Daten werden falsch x-Skala

Question

Ich habe unregelmäßige Daten. Chart zieht gut, wenn ich highcharts verwenden:

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

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

Aber ich habe eine Menge von Daten, damit ich am Tag brauchen um es zu vergrößern und wählen highstock. Dann passiert etwas Merkwürdiges: Die X-Achse wird nichtlinear.

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

Bitte beachten Sie, dass die Daten für eine halbe Stunde Bereich 6. Januar 20: 00-20: 30 mehr Platz als 2 Tage Januar 11-13 zuordnet. (Natürlich sind die Daten gleich.)

Wie kann ich x-Achse am Hochlager zwingen, linear zu werden? Oder Wie kann ich ein unteres Zoom-Werkzeug für Highcharts aktivieren? Vielen Dank.

Answer 1

Sie müssen die xAxis.ordinal Eigenschaft auf false setzen, ist dies true standardmäßig. True Wert gibt an, dass die Punkte in festen Intervallen platziert werden müssen w.r.t Leerzeichen (Pixel) und False ändert die Punkte in festen Intervallen w.r.t.Zeit

xAxis: {  
    ordinal: false 
} 

Linear x-axis | Highstock @ jsFiddle

Answer 2

Sie können Ihr Diagramm mit der HighCharts JavaScript-Bibliothek vergrößern. Die Eigenschaft, die Sie einstellen sollten, ist zoomType

in beschließt, was Dimentions der Benutzer durch Ziehen mit der Maus vergrößern. Kann einer von x, y oder xy sein. Der Standardwert ist "".

Hier sehen Sie ein Beispiel here. Um einen bestimmten Bereich zu vergrößern, halten Sie die linke Maustaste gedrückt und wählen Sie den Bereich, den Sie vergrößern möchten.

HTML-Code:

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

JavaScript-Code:

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

Auch ein "Zoom Reset" -Taste automatisch auf Zoom Ereignis angezeigt wird und es ist leicht zu manipulieren, was Teil des Diagramms wird angezeigt werden, wenn es gedrückt wird.

Für weitere Informationen und Beispiele für Zoom-Einstellungen, Ereignis und die Schaltfläche sollten Sie auf "Highcharts Options Reference" here. Geben Sie einfach "Zoom" in die Suche ein.

Was Ihre andere Frage betrifft: "Wie man den StockChart linear macht" laut der HighStock API ist der Standardtyp des Diagramms linear. Was hier passiert, wird durch die Bereich Option verursacht, die Sie in der Eigenschaft series festgelegt haben. Entfernen Sie einfach wie dies in und Sie werden Ihre linearen Chart erhalten:

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