Ich versuche ein Diagramm von JSON zu erstellen, das von einer Web-API empfangen wurde.Highcharts mit Ticks Nummer anstelle von Datum
Ich hatte es funktioniert, und dann beschlossen, Refactoring zu starten. Nach einiger Zeit bemerkte ich plötzlich, dass die xAxis keine Daten mehr anzeigt, sondern stattdessen Ticks anzeigt. Ich bin ziemlich unerfahren mit JavaScript und noch mehr mit Highcharts, so dass ich meinen Fehler nicht erkennen kann.
High Charts showing ticks. http://mortentoudahl.dk/images/highchartsBug.png
Die Änderung, die ich eine Option Objekt tat, war zu machen und es zu highcharts bei der Instanziierung passiert, nach den hier Anweisungen: http://www.highcharts.com/docs/getting-started/how-to-set-options Wenn ich meinen Code zum letzten Codeblock in diesem Link vergleichen scheint es das Gleiche zu sein, außer für das Optionsobjekt.
var pm10 = [];
var pm25 = [];
var options = {
chart: {
zoomType: 'x',
renderTo: 'container'
},
title: {
text: "Compounds in the air at HCAB"
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : "Pinch the chart to zoom in"
},
xAxix: {
type: 'datetime'
},
yAxis: {
title: {
text: 'µg/m³'
}
},
series: [{
name: 'Particles less than 2.5 µm',
data: pm25,
pointStart: Date.UTC(2016, 5, 8),
pointInterval: 86400 * 1000 // One day
}, {
name: 'Particles less than 10 µm',
data: pm10,
pointStart: Date.UTC(2016, 5, 8),
pointInterval: 86400 * 1000 // One day
}]
};
function ReverseAndSetArrays(data) {
$.each(data.reverse(), function(key, value) {
if ("PM10b" in value) {
pm10.push(value["PM10b"]);
};
if (!("PM10b" in value)) {
pm10.push(null);
};
if ("PM25b" in value) {
pm25.push(value["PM25b"]);
};
if (!("PM25b" in value)) {
pm25.push(null);
};
});
};
var url = "super secret url";
$.getJSON(url, function(data) {
ReverseAndSetArrays(data);
var chart = new Highcharts.Chart(options);
});<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Sie benötigen xAchse Objekt in Ihren Optionen zu verwenden, nicht xAxix. –